css / icons 库 ~

Sass

• 安装Sass：pnpm i -D sass（vite 不需要安装 sass-loader）

---

重置浏览器默认样式

• 安装：pnpm install reset-css

import 'reset-css'

---

tailwindcss

• 安装：pnpm install -D tailwindcss postcss autoprefixer（包含 reset-css）
• 初始化：npx tailwindcss init -p，生成 tailwind.config.js 和 postcss.config.js
• tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html', // 入口文件
    './src/**/*.{vue,js,ts,jsx,tsx}' // 解析文件
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

• 基础样式：css 根文件引入，如 main.css

@tailwind base;
@tailwind components;
@tailwind utilites;

---

unocss

• 安装：pnpm add -D unocss、pnpm add @unocss/reset
• vite.config.ts

import UnoCss from 'unocss/vite'
export default defineConfig({
  plugins: [
    UnoCss()
  ],
})

• 创建：uno.config.ts

import { defineConfig } from 'unocss'
export default defineConfig({})

• main.ts

import '@unocss/reset/tailwind.css' // reset
import 'virtual:uno.css'

• tailwind、unocss 都使用需安装：pnpm add -D @unocss/preset-wind
• uno.config.ts

import { defineConfig } from 'unocss'
import presetWind from '@unocss/preset-wind'
export default defineConfig({
  presets: [presetWind()]
})

---

unocss icons

• 安装：pnpm i -D @iconify/json
• uno.config.ts

import { defineConfig } from 'unocss'
// import presetWind from '@unocss/preset-wind'
import { presetWind, presetIcons } from 'unocss'
export default defineConfig({
  presets: [
    presetWind(),
    presetIcons({
      prefix: 'i-', // 私有前缀
      extraProperties: {
        display: 'inline-block' // 图标样式
      }
    })
  ]
})

示例：

<template>
	<div class="i-logos-vue"></div>
</template>