unocss在vue-cli中的使用

unocss+webpack

安装

pnpm i unocss @unocss/webpack -D

配置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,
    },
  },
})

main.js引入uno.css

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

import "uno.css"

配置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; }
import { defineConfig, presetUno,transformerVariantGroup } from "unocss"

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

坑一:@apply指令

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

  1. 安装 @unocss/postcss
pnpm add -D @unocss/postcss
  1. 配置postcss.config.cjs
// postcss.config.cjs
module.exports = {
  plugins: {
    '@unocss/postcss': {},
  },
}
  1. 在需要使用 @apply 指令的地方,引入@unocss;
<style>
@unocss;
.test {
  @apply p-40px;
}
</style>

图标配置

  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()],
})

你可能感兴趣的:(CSS,vue.js,前端,javascript)