首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用webpack配置CSS模块时出错

使用webpack配置CSS模块时出错
EN

Stack Overflow用户
提问于 2019-09-12 12:29:04
回答 4查看 10.2K关注 0票数 7

我正在尝试用webpack配置CSS模块,但我得到一个错误。

我已经检查了stackoverflow上的其他答案,但到目前为止还没有一个解决方案对我有效。

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

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

代码语言:javascript
运行
复制
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'
        })
    ]
}

我得到的错误是这样的。

代码语言:javascript
运行
复制
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

更新:我可以用这个解决这个问题:

代码语言:javascript
运行
复制
{
            test: /\.css$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                        modules: true
                    }
                }
            ]
        }
EN

Stack Overflow用户

发布于 2021-02-24 19:26:53

我用这个代码修复了这个问题...`

将此代码写入webpack.config.js文件test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true,

票数 0
EN
查看全部 4 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57899750

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档