CSS模块对象导入返回空

Question

我试图在react内部使用css模块，但它不工作。

这段代码的日志:

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

返回对象{}

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

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

css代码可在站点，这里是我的test.css:

.test p {
  color: blue;
} 

如果我将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")
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')
        }, 
    }   
}

有人能帮我吗?

Answer 1

看起来像您将css-loader参数传递给resolve-url-loader:

"css-loader!resolve-url-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]"

应:

"css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]&importLoaders=1!resolve-url-loader"

Answer 2

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

这个webpack配置正在工作:

...
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
};

我猜在webpack的旧版本中有一个问题，这一行:

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

尝试importLoaders和importLoader

你也可以看到我的repo。

Answer 3

在我的特定情况下，我使用官方实用程序facebook/create-react-app。你必须运行以下命令来访问webpack配置:

npm run eject

您将需要编辑config/webpack.config.js并将css-loader modules选项设置为true。

use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules:true <-----
              }),