如何在vue-cli生成的vue.config.js中设置mini-css-extract-plugin的配置
How to set the configuration of mini-css-extract-plugin in vue.config.js generated by vue-cli
我有一个相当大的 Vue 项目,最初是使用 vue-cli 创建的。我在构建时收到了臭名昭著的“无法完成所需的块组顺序”警告。经过大量搜索,我认为解决方案是将 ignoreOrder
添加到 mini-css-extract-plugin
的初始配置选项中,但我不知道该怎么做。我认为这应该在 vue.config.js
中完成。该文件的内容是:
module.exports = {
lintOnSave: false
}
我试过:
module.exports = {
lintOnSave: false,
configureWebpack: {
plugins: [
new MiniCssExtractPlugin({ ignoreOrder: true })
]
}
}
但这给了我一个错误,我认为这意味着模块被加载了两次。
我试过:
module.exports = {
lintOnSave: false,
css: {
loaderOptions: {
ignoreOrder: true
}
}
}
但这给了我一个语法错误。
如何设置该选项?
根据 document, you can pass the configuration for min-css-extract-plugin
通过 css.extract
属性 传递选项,如下所示:
// vue.config.js
module.exports = {
// ...,
css: {
extract: {
ignoreOrder: true
},
}
};
我有一个相当大的 Vue 项目,最初是使用 vue-cli 创建的。我在构建时收到了臭名昭著的“无法完成所需的块组顺序”警告。经过大量搜索,我认为解决方案是将 ignoreOrder
添加到 mini-css-extract-plugin
的初始配置选项中,但我不知道该怎么做。我认为这应该在 vue.config.js
中完成。该文件的内容是:
module.exports = {
lintOnSave: false
}
我试过:
module.exports = {
lintOnSave: false,
configureWebpack: {
plugins: [
new MiniCssExtractPlugin({ ignoreOrder: true })
]
}
}
但这给了我一个错误,我认为这意味着模块被加载了两次。
我试过:
module.exports = {
lintOnSave: false,
css: {
loaderOptions: {
ignoreOrder: true
}
}
}
但这给了我一个语法错误。
如何设置该选项?
根据 document, you can pass the configuration for min-css-extract-plugin
通过 css.extract
属性 传递选项,如下所示:
// vue.config.js
module.exports = {
// ...,
css: {
extract: {
ignoreOrder: true
},
}
};