Question

css loader无效选项出现错误，我的webpack.conifg.js代码如下：

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlWebpackPlugin = new HtmlWebPackPlugin({
    template: "./public/index.html"
});

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve('dist'),
        filename: 'bundled.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            importLoaders: 1,
                            localIdentName:"[name]_[local]_[hash:base64]",
                            sourceMap: true,
                            minimize: true
                        }
                    }
                ]
            },
            { 
                test: /\.(png|jpg|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000' 
            }
        ]
    },
plugins: [htmlWebpackPlugin]
};

我不知道我在哪里做错了。请帮助我解决此问题。我正在将webpack用于reactjs 4，而webpack版本是4。谢谢

Answer 1

尝试注释掉：

// minimize: true

Answer 2

这是解决我的情况的原因：

css-loader 2.1.1

{ loader: 'style-loader'},
{
  loader: 'css-loader',
  options: {
    modules: true,
    localIdentName: '[local]',
    import: true,
    importLoaders: true,
  }
},
{ loader: 'sass-loader'}

css-loader 3.0.0

{ loader: 'style-loader'},
{
  loader: 'css-loader',
  options: {
    modules: {
      mode: 'local',
      localIdentName: '[local]',
    },
    import: true,
    importLoaders: true,
  }
},
{ loader: 'sass-loader'}

Answer 3

评论minimize以前是可行的，尽管我以全新安装的css-loader开始了一个新项目，而这次的罪魁祸首是importLoader: 1。只需删除importLoader，它应该可以工作。

我在React中使用css模块，并且一切运行正常。

Answer 4

这对我的VUE Js项目有效：

浏览到/build/utils.js文件，并在css-loader的注释对象中查看将您标记为错误的选项。就我而言，我不得不评论：

minimize: process.env.NODE_ENV === 'production',

Webpack返回ValidationError：CSS加载程序无效选项

4 个答案:

css-loader 2.1.1

css-loader 3.0.0