使用webpack配置CSS模块时出错
使用webpack配置CSS模块时出错
提问于 2019-09-12 12:29:04
我正在尝试用webpack配置CSS模块，但我得到一个错误。
我已经检查了stackoverflow上的其他答案，但到目前为止还没有一个解决方案对我有效。
我已经按照文档的建议添加了加载器，但它仍然显示错误。
这是我的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
}
}
]
}回答 4
Stack Overflow用户
发布于 2019-09-12 17:05:25
css-loader选项的语法在版本3.0.0中已更改。
被移到下面
选项。
我不知道为什么选择
如果在内联语法中指定，则返回错误。但非内联语法正在运行，请尝试用以下代码替换webpack配置中的css加载器配置：
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
}
]
}Stack Overflow用户
发布于 2020-02-14 21:03:27
我遇到了这个问题，并用下面的解决方案解决了它
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'localIndentName'. These properties are valid:
object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }在最新版本的react中，webpack.config.js具有
嵌套在模块中。
移动您的
通过复制到模块
格式如下
{测试: cssRegex，排除: cssModuleRegex，使用: getStyleLoaders({ importLoaders: 1，sourceMap: isEnvProduction && shouldUseSourceMap，模块：{ localIdentName：‘
名称
_
_
本地
_
_
_
哈希:base64:5
‘}}
这应该可以解决这个问题
Stack Overflow用户
发布于 2020-07-29 00:46:12
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
// modules:true,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules:{
localIdentName:'[name]__[local]__[hash:base64:5]',
}
}),使用这段代码，它对我很有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57899750
复制相关文章
相似问题
腾讯云开发者
