vue2 中使用unocss

基于vue-cli的unocss 配置

• @vue/cli 版本 5.0.8

安装依赖

npm i @unocss/webpack unocss

配置

vue.config.js中配置如下

//vue.config.js
const { defineConfig } = require("@vue/cli-service");
const UnoCSS = require("@unocss/webpack").default;
module.exports = defineConfig({
 transpileDependencies: true,
 lintOnSave: true,
 configureWebpack: {
   plugins: [UnoCSS()],
   optimization: {
     realContentHash: true,
   },
 },
 chainWebpack(config) {
   config.module.rule("vue").uses.delete("cache-loader");
   config.merge({
     cache: false,
   });
 },
 css: {
   extract: true,
 },
});

创建uno.config.js配置

// uno.config.js
import {
  defineConfig,
  presetAttributify,
  presetUno,
  transformerVariantGroup,
} from "unocss";
import presetIcons from "@unocss/preset-icons";
export default defineConfig({
  presets: [
    presetAttributify(),
    presetUno(),
    presetIcons({
      /* options */
    }),
  ],
  transformers: [transformerVariantGroup()],
});

在main.js中导入

import "uno.css";

这下可以在你的代码中愉快的使用unocss了