使用webpack配置CSS模块时出错 [英] Error while configuring CSS modules with webpack
问题描述
我正在尝试使用webpack配置CSS模块,但出现错误.
I am trying to configure CSS modules with webpack but I get an error.
我已经检查了关于stackoverflow的其他答案,但是到目前为止,没有一种解决方案对我有用.
I have checked the other answers here on stackoverflow but none of the solutions have made it work for me so far.
我已按照文档建议添加了加载程序,但仍然显示错误.
I have added the loader as the docs suggest but it still shows an error.
这是我的webpack.configuration.js文件.
This is my webpack.configuration.js file.
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
更新:我可以通过以下方式对其进行修复:
update: I was able to fix it with this:
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true
}
}
]
}
推荐答案
css-loader选项的语法在3.0.0版中已更改. localIdentName
已移至 modules
选项下.
Syntax of css-loader options has changed in version 3.0.0. localIdentName
was moved under modules
option.
如果以内联语法指定,我不知道为什么选项 importLoaders
返回错误.但是非内联语法仍在起作用,请尝试使用以下方法替换Webpack配置中的CSS加载程序配置:
I don't know why option importLoaders
is returning error if specified in inline syntax. But non-inline syntax is working, try to replace css loader configuration in your webpack config with this:
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
}
]
}
这篇关于使用webpack配置CSS模块时出错的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!