前言
在维护公司一个技术栈为 vue2 + ts + unocss
的老项目时发现 unocss
在开发环境和正式环境都不能生效,最先以为是插件的版本问题,排查后发现是因为项目在使用 unocss
时的配置没有配置完全,根据 vue-cli
的版本按照 unocss
的官方仓库里的 example 配置 vue.config.js
这是 vue-cli4 的版本配置
const UnoCSS = require("@unocss/webpack").default;
module.exports = {
configureWebpack: {
plugins: [UnoCSS({})],
},
chainWebpack(config) {
config.module.rule("vue").uses.delete("cache-loader");
config.module.rule("tsx").uses.delete("cache-loader");
config.merge({
cache: false,
});
},
// 发现这个没有配置
css: {
extract: {
filename: "[name].[hash:9].css",
},
},
};
配置完成后发现又报错
Failed to compile.
chunk 5 [mini-css-extract-plugin]
Conflicting order. Following module has been added:
* css ./node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--11-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!./node_modules/style-resources-loader/lib??ref--11-oneOf-1-4!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/unplugin/dist/webpack/loaders/transform.js?unpluginName=unocss%3Awebpack!./src/components/catalogue/catalogue-item.vue?vue&type=style&index=0&id=483cc5ed&lang=less&scoped=true&
despite it was not able to fulfill desired ordering with these modules:
* css ./node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--11-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!./node_modules/style-resources-loader/lib??ref--11-oneOf-1-4!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/unplugin/dist/webpack/loaders/transform.js?unpluginName=unocss%3Awebpack!./src/components/catalogue/create-catalogue-modal.vue?vue&type=style&index=0&id=3b6286ee&lang=less&scoped=true&
- couldn't fulfill desired order of chunk group(s)
- while fulfilling desired order of chunk group(s) , ,
查询得知 是因为文件的重复编译导致的
由于是老项目 所以当然是最简单的解决办法:
- 编译时忽略排序
在 vue.config.js 下方,将 css 配置修改为// vue.config.js css: { extract: { filename: "[name].[hash:9].css", ignoreOrder: true }, },