关于vue2中使用unocss样式无法生效的问题

前言

在维护公司一个技术栈为 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
    },
  },
  

参考来源

• 打包运行时抛出 chunk name [mini-css-extract-plugin] Conflicting order. Following module has been added 错误！