unocss在vue-cli中的使用

unocss+webpack

安装

pnpm i unocss @unocss/webpack -D
1

配置vue.config.js

const UnoCSS = require("@unocss/webpack").default
module.exports = defineConfig({
	configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src/"),
      },
    },
    //
    plugins: [UnoCSS()],
    optimization: {
      // unocss
      realContentHash: true,
    },
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

main.js引入uno.css

如果报错Can't resolve uno.css，卸载上面的依赖，再重新装试试

import "uno.css"
1

配置uno.config.js

预设

presetUno的预设是继承于@unocss/preset-wind and @unocss/preset-mini.支持流行的css框架如Tailwind CSS, Windi CSS, Bootstrap, Tachyons的样式写法，如ml-3,ms-2,mt-10px,ma4

.ma4 { margin: 1rem; }
.ml-3 { margin-left: 0.75rem; }
.ms-2 { margin-inline-start: 0.5rem; }
.mt-10px { margin-top: 10px; }
1
2
3
4

import { defineConfig, presetUno,transformerVariantGroup } from "unocss"

export default defineConfig({
  // ...UnoCSS options
  presets: [presetUno()],
  // hover:text-white等
  transformers: [transformerVariantGroup()],
})

1
2
3
4
5
6
7
8
9

坑一：@apply指令

@unocss/transformer-directives只在vite工程中起作用，在webpack包括vue-cli在要使用@unocss/postcss地址

1. 安装 @unocss/postcss

pnpm add -D @unocss/postcss
1

2. 配置postcss.config.cjs

// postcss.config.cjs
module.exports = {
  plugins: {
    '@unocss/postcss': {},
  },
}
1
2
3
4
5
6

3. 在需要使用 @apply 指令的地方，引入@unocss;

<style>
@unocss;
.test {
  @apply p-40px;
}
</style>
1
2
3
4
5
6

图标配置

1. 安装@@iconify/json,可以使用iconfify图标
2. 自定义图标集，包括mask模式（可以着色）和background-image模式（不能改变颜色）的图标，需要配置

//  uno.config.ts
import { defineConfig, presetUno, transformerVariantGroup, presetIcons } from "unocss"
import { FileSystemIconLoader } from "@iconify/utils/lib/loader/node-loaders"

export default defineConfig({
  // ...UnoCSS options
  presets: [
    presetUno(),
    presetIcons({
      prefix: "i-",
      // icon的样式
      extraProperties: {
        display: "inline-block",
        "vertical-align": "middle",
        width: "1em",
        height: "1em",
      },
      // icon的集合,每次新增图标都需要重启项目
      //   可着色图标，mask模式
      //   原先svg图标，background-image模式
      collections: {
        icon: FileSystemIconLoader("./src/assets/svgs", svg =>
          svg.replace(/fill="([^"]*)"/, 'fill="currentColor"'),
        ),
        "icon-color": FileSystemIconLoader("./src/assets/svgs"),
      },
      // mode: "mask", // mask 可以使用color改变颜色,根据是否有currentColor属性决定使用mask，或者background-image模式
    }),
  ],
  transformers: [transformerVariantGroup()],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31