Vite 中使用 Unocss

准备

在 vscode 中安装 UnoCss 插件
在 vscode 中安装 ToUnocss 插件

安装

这里面是Vite安装Unocss的步骤

webpack中安装Unocss的步骤请自行参考文档

安装依赖

bash

 pnpm i unocss @iconify-json/ep @unocss/preset-rem-to-px @unocss/transformer-directives -D

unocss: 核心库
@iconify-json/ep: 是 ElementPlus 的图标库.想要什么图标可以去https://icones.js.org里面找,ep 就是 element-plus 的缩写,你要是想用其他的就自己改名字
@unocss/preset-rem-to-px: 将 rem 转换为 px(unicss 默认就是 1rem=4px,用了这个插件后可以自己自定义)
@unocss/transformer-directives: 可以使用@apply,@screem theme 函数

配置

我这里拿 vite.config.ts 举例

(1) 找到 vite.config.ts 或者 vite.config.js

import { fileURLToPath, URL } from "node:url";
// 增加引入
import UnoCSS from "unocss/vite";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  // 增加引入
  plugins: [vue(), UnoCSS()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

(2)根目录下面创建 uno.config.ts 文件或者 uno.config.js 文件

写如下代码

import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from "unocss";
import presetRemToPx from "@unocss/preset-rem-to-px";

export default defineConfig({
  // 静态规则
  rules: [
    // ['mx-5', { 'margin-bottom': '5px', color: '#00ff00' }]
  ],
  // 自定义属性 一个属性可以对应多个unocss类值
  shortcuts: [
    // [/^base-(.*)$/, (match) => `mx-5  border-${match[1]}`]
    {
      // 垂直水平居中
      "flex-center": "flex items-center justify-center",
      // 放在最后
      "flex-end": "flex items-center justify-end",
      // 垂直居中
      "flex-middle": "flex items-center",
      // 分开两边
      "flex-between": "flex items-center justify-between",
      // 竖着居中
      "flex-col-center": "flex flex-col  justify-center",
    },
  ],
  theme: {
    colors: {
      // ...
    },
  },
  presets: [
    presetUno(),
    presetAttributify(),
    // 现在mt-1 就会转换成margin-top:1px
    presetRemToPx({
      baseFontSize: 4,
    }),
    // 自动引入图标配置
    presetIcons({
      scale: 1.2,
      warn: true,
    }),
    //会套用到markdown的标签上面 加上prose的classname 例外的内容加上not-prose
    presetTypography({
      selectorName: "markdown", // 现在可以像 `markdown markdown-gray`、`not-markdown` 一样使用
      // cssExtend 是一个带有 CSS 选择器作为键和 CSS 声明块作为值的对象，就像编写普通的 CSS 一样。
      cssExtend: {
        code: {
          color: "#8b5cf6",
        },
        "a:hover": {
          color: "#f43f5e",
        },
        "a:visited": {
          color: "#14b8a6",
        },
      },
    }),
    // 自定义字体
    // presetWebFonts({
    //   // 使用 axios 并设置 https 代理
    //   customFetch: (url: string) =>
    //     axios
    //       .get(url, { httpsAgent: new ProxyAgent('https://localhost:7890') })
    //       .then((it) => it.data),
    //   provider: 'google', // 默认字体的提供商
    //   fonts: {
    //     sans: 'Roboto',
    //     mono: ['Fira Code', 'Fira Mono:400,700']
    //   }
    // })
  ],
  // 可以使用@apply @screen
  transformers: [transformerDirectives(), transformerVariantGroup()],
});

(3) 将virtual:uno.css 添加到入口文件 main.js

这句代表取消 eslint 验证

import { createApp } from "vue";
import { createPinia } from "pinia";
// main.ts
// eslint-disable-next-line import/no-unresolved
import "virtual:uno.css";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.mount("#app");

使用

html

<script setup lang="ts"></script>

<template>
  <main>
    <div
      w750
      h300
      mxauto
      my0
      textcenter
      bg-emerald
      text-24
      flex-center
      flex-col
      gap40
    >
      <div bg="#676767" text="[#898793]">pnpm i unocss @iconify-json/ep</div>
      <div w300 border="#ff0000" border-solid border-20 px20>
        @unocss/transformer-directives -D
      </div>
      <div>@unocss/preset-rem-to-px</div>
      <div i-ep:edit w24 h24></div>
    </div>
  </main>
</template>

<style scoped lang="scss">
  .box {
    @apply text-center text-24px w-750 h-300 bg-red flex flex-col flex-nowrap justify-center items-center mx-auto my-0 hover:text-blue;
  }
</style>

INFO

apply 用法就是上面的类太多了把这些类绑定到同一个类名下.(用的太少了)

i-ep:edit 就是使用图标.冒号后面跟的就是图标名称必须是块状元素

apply

经过本人测试使用apply的话pxt2rem不管用

验证

有的时候安装完以后所有的 ts 不识别导入模块

可以在根目录下找到 tsconfig.json 文件

里面增加 compilerOptions

json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Vite 中使用 Unocss ​

准备 ​

安装 ​

安装依赖 ​

配置 ​

使用 ​

验证 ​

Vite 中使用 Unocss

准备

安装

安装依赖

配置

使用

验证