初始化vue3项目css

清除浏览器默认样式

pnpm i normalize.css

// main.ts
import "normalize.css/normalize.css"

添加sass

pnpm i sass -D

// vite.config.ts
css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/var.scss";` // 引入scss全局变量
      }
    }
}

添加windicss

npm i -D vite-plugin-windicss windicss

// vite.config.js
import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS(),
  ],
}

// main.js
import 'virtual:windi.css'

// windi.config.ts
import { defineConfig } from 'vite-plugin-windicss'

export default defineConfig({
  preflight: false,
})

添加autoprefixer

//vite.config.js

export default defineConfig({
    css: {
        postcss: {
            plugins: [require("autoprefixer")]
        },
    }
});