vue2+vue-cli使用unocss

1.安装依赖

执行命令：

npm install @unocss/webpack --save-dev

2.配置vue.config.js

const unocss = require('@unocss/webpack').default
module.exports ={
  configureWebpack: {
    plugins: [
      new unocss()
  }
}

3.根目录增加unocss.config.js

在根目录中添加 unocss.config.js 文件是为了提供更细粒度的配置选项给 @unocss/webpack 插件。通过这个配置文件，你可以定制化 UnoCSS 的行为，例如定义主题样式、配置插件、启用或禁用特定功能等。

在 Vue CLI 项目中，默认情况下，你应该在根目录创建一个 unocss.config.js 文件来配置 UnoCSS。这个文件会被 @unocss/webpack 插件自动识别并加载。具体配置请查阅官网文档。

import {
  defineConfig,
  presetAttributify,
  presetUno,
  transformerDirectives,
} from 'unocss'

export default defineConfig({
  rules: [
    [/^line-height-(.+)$/, ([, d]) => ({ 'line-height': `${+d / 4}rem` })],
  ],
  shortcuts: [
  ],
  presets: [
    presetUno(),
    presetAttributify(),
  ],
  transformers: [
    transformerDirectives(),
    // transformerVariantGroup(),
  ],
})

4.运行项目 测试是否生效

<div class="text-red">test日落</div>

npm run serve