在了解使用了Unocss后，就完全被它迷住了。接手过的所有项目都配置使用了它，包括一些旧项目，也跟同事分享了使用Unocss的便捷性。

这里分享一下旧项目如何配置和使用Unocss的，项目是vue2+vue-cli构建的，node<20平常开发这些项目都需要切换到16.x去启动。

vscode插件UnoCSS

使用前先安装vscode插件，有了它对于编写UnoCSS的样式类提供了极大的便利，真的是事半功倍。

安装依赖

官方提供了两种方式的配置，一个是作为postcss的插件@unocss/postcss;一个是作为webpack插件@unocss/webpack

本来是选择了postcss插件去安装的，但是偶尔会出现依赖安装时卡住就不动了，多个同事反映之后就改为了webpack插件的方式。目前没有发现任何问题。

ok，采用webpack插件的方式，安装依赖：

npm install -D @unocss/webpack unocss

创建unocss配置文件uno.config.ts:

可以暂时不需要考虑配置自定义的规则等，在慢慢使用过程中熟悉之后再去查看每个配置的功能作用，我们这里配置拉满。

import {
  defineConfig,
  presetAttributify,
  presetUno,
  presetIcons,
  presetTypography,
  transformerVariantGroup,
} from 'unocss';

export default defineConfig({
  rules: [
    // 这里可以自定义一些规则
  ],
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons(),
    presetTypography(),
  ],
  transformers: [transformerVariantGroup()],
});

@unocss/webpack 插件需要依赖style-loader和css-loader 为了加载.css文件。正常来说使用了vue-cli构建的项目，已经具备加载.css的能力。

配置webpack

在配置插件之前，确认一下@vue/cli-service的版本，针对不同的版本，它依赖的webpack版本也不同，就需要不同的配置，分为wepack@4 和 webpack@5 两种情况。

可以在package-lock.json 查找@vue/cli-service依赖的webpack版本

我当前项目的@vue/cli-service@3.9.0 依赖的webpack版本是4.0。但是我们安装的是最新版的unocss@0.65,从v0.59开始仅支持ESM的加载方式，所以配置时需要动态加载。

为了避免被旧依赖安装配置的问题所缠绕，也为了使用到最新版的unocss功能。对当前项目的@vue/cli-service进行升级，升级版本到@vue/cli-service@5

升级版本不是很麻烦，我们查看开发环境所需的依赖的版本，如果太旧了删除掉重新安装，比如@vue/*开头、babel、eslint等，在安装新版本时，如果出现依赖冲突可以降低一个版本安装。

折腾了一两个小时，更新之后发现代码里出现eslint规则校验问题有这么多。

推荐一个可以查看依赖版本的工具,可以 升级依赖，查看依赖关系图

升级完成之后按照当前版本配置修改vue.config.js,因为原来的vue.config.js导出的是一个配置对象，而且@vue/cli-service@3只支持对象，这使我不得不放弃直接配置unocss的想法，选择了项目升级。

module.exports = {
    // ...
}

升级后的vue-cli是支持定义函数加载的，我们修改配置如下，使用import动态加载,可以使用defineConfig：

升级完成后的@vue/cli-service版本是^5.0.8,配置按照webpack 5

const { defineConfig } = require("@vue/cli-service");
// ...

module.exports = async () => {
    const { default: UnoCSS } = await import('@unocss/webpack');

    reutnr {
        chainWebpack: (config) => {
            config.module.rule('vue').uses.delete('cache-loader');
            // 使用了ts 开启
            // config.module.rule('tsx').uses.delete('cache-loader')
            config.merge({
                cache: false,
            });
            // ...other
        },
        configureWebpack: {
            plugins: [UnoCSS()],
            optimization: {
              realContentHash: true,
            },
        },
        css: {
            extract:
                process.env.NODE_ENV === 'development'
                ? {
                    filename: '[name].css',
                    chunkFilename: '[name].[hash:9].css',
                    }
                : true,
        },
    }
}

配置完插件之后，我们还需要最后一步，在主入口文件中加载import 'uno.css'css文件。在main.js中添加：

import 'uno.css';

这里就配置完成了，记得安装vscode的插件，可愉快的在代码里写样式了。

配置postcss插件

项目里配置了postcss插件postcss-px-to-viewport,本来是用@unocss/postcss是不需要再处理的，现在改为配置为webpack插件，需要处理下px转vw的问题。

基准设计图尺寸为1920px,定义转换的方法：

// unocss px转vw
const px2Vw = (width) => {
  if (Math.abs(width) < 2) {
    return width + "px";
  }
  return ((width / 1920) * 100).toFixed(5) + "vw";
};

根据参数类型定义找到了一个插件的配置项，可以在生成数据对象后进行一次处理。

{
  //... other
  /**
   * Postprocess the generate utils object
   */
  postprocess?: Arrayable<Postprocessor>
}

这里的postprocess可以是一个对象；也可以是一个数组；type Postprocessor = (util: UtilObject) => void 定义一个函数，参数是一个UtilObject对象。我们可以直接修改对象里的数据，不需要返回。

可以自己打印输出这个对象里有什么，也可以看源码类型定义。在函数中可以拿到已经生成的css样式，然后可以直接修改。

interface UtilObject {
  selector: string
  entries: CSSEntries
  parent: string | undefined
  layer: string | undefined
  sort: number | undefined
  noMerge: boolean | undefined
}

util.entries 是一个数组，它把我们定义的比如font-size-20px拆分成了['font-size','20px'],这样我们需要遍历这个数组，将值为px的属性值转换成vw。

OK，到这之后我们就可以在webpack的unocss插件定义postprocess来处理。

UnoCSS({
  postprocess: (util) => {
    // 匹配px值
    const pxReg = /^-?[\.\d]+px$/;

    util.entries.forEach((item) => {
      const value = item[1];
      if (value && typeof value === "string" && pxReg.test(value)) {
        // 调用方法直接赋值
        item[1] = px2Vw(value.slice(0, -2) * 1);
      }
    });
  }
}),

测试可以看到生成的css样式已经转换成vw了。

unocss的版本选择

开始升级选择了安装最新的版本，发现使用时开发环境下没有问题。线上同事打包时说报错，打包不了，心想只能是这个版本的问题了，然后直接退回到0.59版本，这个版本在其他项目里也用肯定没问题，线上部署过后。尝试了从最新版本慢慢降级，最后测试降低了两个小版本才正常。

解决类名冲突

旧项目也定义了大量的css中，unocss可能会把原项目中的class类名识别并增加了样式，这就导致之前样式出现问题，为了暂时解决这个问题，我们屏蔽掉unocss中有冲突的css类名。

修改配置 uno.config.js:

export default defineConfig({
  // ...
  blocklist: ["container", "table"],
})

通过设置blocklist白名单，排除这些类名.container和.table的css生成。