css模块对象导入返回空 [英] css modules object import returns empty

问题描述

我正在尝试在 react 中使用 css 模块，但它不起作用.

这段代码的日志:

从 'react' 导入 React从../../css/test.css"导入样式类测试扩展了 React.Component {使成为() {控制台日志(样式)返回 (<div className={styles.app}><p>此文本将是蓝色的</p>

);}}导出默认测试

返回对象{}

并且呈现的代码是没有类的标签:

<div><p>此文本将是蓝色的</p></div>

css 代码可在网站上找到，这是我的 test.css:

.test p {颜色:蓝色；}

如果我把 div 改成 class='test'，p 的颜色就会变成蓝色

这是我的 webpack.config.js

var path = require('path')var webpack = require('webpack')var HappyPack = require('happypack')var BundleTracker = require('webpack-bundle-tracker')var path = require('path')var ExtractTextPlugin = require("extract-text-webpack-plugin")函数_路径(p){返回 path.join(__dirname, p);}模块.出口 = {上下文:__dirname，入口: ['./assets/js/index'],输出: {路径:path.resolve('./assets/bundles/'),文件名:'[名称].js'},devtool: 'inline-eval-cheap-source-map',插件: [新的 BundleTracker({filename: './webpack-stats.json'}),新的 webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery','window.jQuery': 'jquery'}),新的快乐包({id: 'jsx',线程:4，装载机:["babel-loader"]}),new ExtractTextPlugin("[name].css", { allChunks: true })],模块: {装载机: [{测试:/\.css$/,包括: path.resolve(__dirname, './assets/css/'),loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")},{测试:/\.scss$/,包括: path.resolve(__dirname, './assets/css/'),loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader!sass-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")},{测试:/\.jsx?$/,包括: path.resolve(__dirname, './assets/js/'),排除:/node_modules/，装载机:[happypack/loader?id=jsx"]},{测试:/\.png$/,加载器:'文件加载器'，询问: {name: '/static/img/[name].[ext]'}}]},解决: {模块目录:['node_modules']，扩展名:[''，'.js'，'.jsx']，别名:{'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask')},}}

有人可以帮我吗?

提前致谢.

解决方案

这个问题已经过去了很多时间，所以我的 webpack 用其他技术更新了很多次.

这个 webpack 配置正在运行:

<代码>...模块.出口 = {入口，输出: {文件名:'[名称].js'，路径:path.resolve(__dirname, 'dist'),公共路径:'/'},开发工具:process.env.NODE_ENV === '生产' ?'源图':'内联源图'，模块: {规则: [{测试:/\.jsx?$/,包括: path.resolve(__dirname, './app/view/'),排除:/node_modules/，loader: 'babel-loader'},{测试:/\.pcss$/,包括: path.resolve(__dirname, './app/view/'),用: [{装载机:'风格装载机'},{装载机:'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'},{loader: 'postcss-loader',选项: {插件:函数(){返回 [require('postcss-import'),要求('postcss-mixins')，要求('postcss-cssnext')({浏览器:['最后 2 个版本']}),require('postcss-嵌套'),require('postcss-brand-colors')];}}}],排除:/node_modules/},{测试:/\.(png|svg|jpg|webp)$/,用: {加载器:'文件加载器'}}]},解决: {扩展名:['.js', '.jsx'],模块:[path.resolve(__dirname, 'node_modules')]},插件};

我猜 webpack 上的旧版本有问题，下面这行:

'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'

试试 importLoaders 和 importLoader

你也可以看到我的repo.

I am trying to use css modules inside react, but it is not working.

The log of this code:

import React from 'react'
import styles from '../../css/test.css'

class Test extends React.Component {
    render() {
        console.log(styles)
        return (
            <div className={styles.app}>
                <p>This text will be blue</p>
            </div>
        );
    }
}

export default Test

returns Object {}

and the rendered code are tags with no class:

<div><p>This text will be blue</p></div>

The css code is available at site, here is my test.css:

.test p {
  color: blue;
} 

If I changed the div to have class='test', the color of p changes to blue

Here is my webpack.config.js

var path = require('path')
var webpack = require('webpack')
var HappyPack = require('happypack')
var BundleTracker = require('webpack-bundle-tracker')
var path = require('path')
var ExtractTextPlugin = require("extract-text-webpack-plugin")

function _path(p) {
  return path.join(__dirname, p);
}

module.exports = {

    context: __dirname,
    entry: [
        './assets/js/index'
    ], 

    output: {
        path: path.resolve('./assets/bundles/'), 
        filename: '[name].js'
    },

    devtool: 'inline-eval-cheap-source-map',

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}), 
        new webpack.ProvidePlugin({ 
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery' 
        }),
        new HappyPack({
            id: 'jsx',
            threads: 4,
            loaders: ["babel-loader"]
        }),
        new ExtractTextPlugin("[name].css", { allChunks: true })

    ],

    module: {
        loaders: [

             {
                test: /\.css$/,
                include: path.resolve(__dirname, './assets/css/'),
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")
            },

            {
                test: /\.scss$/,
                include: path.resolve(__dirname, './assets/css/'),
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!resolve-url-loader!sass-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]")
            },

            {
                test: /\.jsx?$/, 
                include: path.resolve(__dirname, './assets/js/'),
                exclude: /node_modules/, 
                loaders: ["happypack/loader?id=jsx"]
            },
            {
                test: /\.png$/,
                loader: 'file-loader',
                query: {
                    name: '/static/img/[name].[ext]'
                }
            }
        ]
    },

    resolve: {
        modulesDirectories: ['node_modules'],
        extensions: ['', '.js', '.jsx'],
        alias: {
          'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask')
        }, 
    }   
}

Can anyone help me?

Thanks in advance.

解决方案

A lot of time passed since this question, so my webpack was update many times with another technologies.

This webpack config is working:

...
module.exports = {
  entry,
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devtool:
    process.env.NODE_ENV === 'production' ? 'source-map' : 'inline-source-map',

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, './app/view/'),
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.pcss$/,
        include: path.resolve(__dirname, './app/view/'),
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader:
              'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function() {
                return [
                  require('postcss-import'),
                  require('postcss-mixins'),
                  require('postcss-cssnext')({
                    browsers: ['last 2 versions']
                  }),
                  require('postcss-nested'),
                  require('postcss-brand-colors')
                ];
              }
            }
          }
        ],
        exclude: /node_modules/
      },
      {
        test: /\.(png|svg|jpg|webp)$/,
        use: {
          loader: 'file-loader'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    modules: [path.resolve(__dirname, 'node_modules')]
  },
  plugins
};

I guess that there is an issue with older versions at webpack with this line:

'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'

Try importLoaders and importLoader

You can see my repo too.

这篇关于css模块对象导入返回空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！