reactjs - Webpack 返回 ValidationError: CSS Loader Invalid Options
问题描述
我收到 css loader invalid option 的错误,我的 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。谢谢
解决方案
这就是解决我的情况的原因:
CSS加载器2.1.1
{ loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]',
import: true,
importLoaders: true,
}
},
{ loader: 'sass-loader'}
css 加载器 3.0.0
{ loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
localIdentName: '[local]',
},
import: true,
importLoaders: true,
}
},
{ loader: 'sass-loader'}