vue-cli3进行build为什么一直报错mini-css-extract-plugin未添加?
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
·
该文章仅供自己记录。
官方文档GitHub - webpack-contrib/mini-css-extract-plugin: Lightweight CSS extraction plugin
供配置参考。
错误内容:
Error: You forgot to add 'mini-css-extract-plugin'
plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`),
please read https://github.com/webpack-contrib
/mini-css-extract-plugin#getting-started
原因,我一开始的mini-css-extract-plugin版本为
"mini-css-extract-plugin": "^2.4.5",
而webpack的版本为
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
我查找了很多博客都没有找到原因,我怀疑是版本不匹配,webpack版本过高。
所以我将mini-css-extract-plugin版本更新到目前最新即
"mini-css-extract-plugin": "^2.7.2",
然后使用官方文档的配置
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
即可成功build。
其次,如果没有安装相关插件,代码段
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
可能会因为"//"在css中不是正确的注释方法而显示无法识别的符号而报错,删掉这一段也可成功build。
更多推荐
已为社区贡献1条内容
所有评论(0)