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

技术栈为 vue2 + ts + unocss 的项目，使用 vue-cli4 的版本配置。
根据 vue-cli 的版本按照 unocss 的官方仓库里的 example 配置 vue.config.js，如下：

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 // 新增
},
},