使用 webpack 配置 CSS 模块时出错

Posted 2023-02-22

【中文标题】使用 webpack 配置 CSS 模块时出错

【英文标题】：Error while configuring CSS modules with webpack

【发布时间】：2020-01-13 22:05:33

【问题描述】：

我正在尝试使用 webpack 配置 CSS 模块，但出现错误。

我已经在 *** 上检查了其他答案，但到目前为止，没有一个解决方案适合我。

我已按照文档的建议添加了加载器，但它仍然显示错误。

这是我的 webpack.configuration.js 文件。

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


module.exports = 
    entry: './src/index.js',
    output: 
        path: path.join(__dirname, '/dist'),
        filename: 'index_bundle.js',
        publicPath: '/'
    ,
    module: 
        rules: [

            
                test: /\.css$/,
                loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
            ,

            
                test: /\.js$/,
                exclude: /node_modules/,
                use: 
                    loader: 'babel-loader'
                
            
        ]
    ,
    devServer: 
        historyApiFallback: true,
    ,
    plugins: [
        new HtmlWebpackPlugin(
            template: './src/index.html'
        )
    ]

我得到的错误是这样的。

ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./src/index.css)
    Module build failed (from ./node_modules/css-loader/dist/cjs.js):
    ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
     - options has an unknown property 'localIdentName'. These properties are valid:
       object  url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? 
     - options.importLoaders should be one of these:
       boolean | number
       -> Enables/Disables or setups number of loaders applied before CSS loader (https://github.com/webpack-contrib/css-loader#importloaders).
       Details:
        * options.importLoaders should be a boolean.
        * options.importLoaders should be a number.
        at validate (C:\Users\Arjun\Desktop\manpro\node_modules\css-loader\node_modules\schema-utils\dist\validate.js:49:11)
        at Object.loader (C:\Users\Arjun\Desktop\manpro\node_modules\css-loader\dist\index.js:34:28)
     @ ./src/index.css 1:14-150 20:4-31:5 23:25-161
     @ ./src/index.js

    ERROR in ./src/components/layout/Navbar.css (./node_modules/css-loader/dist/cjs.js?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./src/components/layout/Navbar.css)
    Module build failed (from ./node_modules/css-loader/dist/cjs.js):
    ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
     - options has an unknown property 'localIdentName'. These properties are valid

更新：我可以用这个修复它：

            test: /\.css$/,
            use: [
                'style-loader',
                
                    loader: 'css-loader',
                    options: 
                        importLoaders: 1,
                        modules: true
                    
                
            ]
        

【参考方案1】：

css-loader 选项的语法在 3.0.0 版中已更改。 localIdentName 已移至 modules 选项下。

我不知道为什么选项importLoaders 在内联语法中指定时返回错误。但是非内联语法是有效的，尝试用这个替换你的 webpack 配置中的 css 加载器配置：

    test: /\.css$/,
    use: [
        
            loader: 'style-loader'
        ,
        
            loader: 'css-loader',
            options: 
                importLoaders: 1,
                modules: 
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                
            
        
    ]

【讨论】：

嘿，谢谢。我可以用这个来修复它：“ test: /\.css$/, use: [ 'style-loader', loader: 'css-loader', options: importLoaders: 1, modules: true ] "

是的，这也是正确的。但是，如果您还想指定与默认版本不同的localIdentName 版本，请尝试使用我的建议。

当然。再次感谢。

救命稻草。新反应。有点迷失了这个设置。谢谢

【参考方案2】：

我遇到了这个问题并使用以下解决方案修复了它

ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.<br>

 - options has an unknown property 'localIndentName'. These properties are valid:
   object  url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? 

在最新版本的 react webpack.config.js 中有 localIdentName 嵌套在模块中。 将localIdentName: '[name]__[local]___[hash:base64:5]' 移动到模块中，将modules : true 替换为以下格式

              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders(
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              modules: 
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                

这应该可以解决问题

【参考方案3】：

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders(
    importLoaders: 1,
    // modules:true,
    sourceMap: isEnvProduction && shouldUseSourceMap,
    modules:
        localIdentName:'[name]__[local]__[hash:base64:5]',
    
),

使用对我有用的代码。

【讨论】：

欢迎来到 Stack Overflow。通常可以通过添加一些关于它们的工作原理和原因的解释来改进纯代码的答案。

【参考方案4】：

我用这段代码解决了这个问题...`

将此代码写入 webpack.config.js 文件中

test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders( importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true,

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。