UnoCSS

关于什么是原子样式以及为何选择 UnoCSS，推荐阅读：

• UnoCSS
• 重新构想原子化 CSS
• AtomicCSS

接入 UnoCSS

安装 UnoCSS

pnpm add unocss

配置

以小程序端为例，在项目根目录下创建 uno.config.js 文件

uno.config.js

import {defineConfig, presetUno} from 'unocss'
import presetMiniapp from '@ifanrx/uni-mp/unocss-preset-miniapp'

export default defineConfig({
  presets: [
    presetUno({
      preflight: false,
    }),
    presetMiniapp(),
  ],
})

vite.config.js

import {defineConfig} from 'vite'
import Unocss from 'unocss/vite'

export default defineConfig(() => {
  return {
    plugins: [Unocss()],
  }
})

main.js

import 'virtual:uno.css'

VSCode 插件

官方文档

官方的 vscode 插件貌似有点问题，不知道修复了没有，要是不行的话下载这个试试

需要在项目根目录下创建 .vscode 文件夹，并新建 settings.json 文件，将需要开启代码提示的应用目录添加到 settings.json 中

以常规的小程序端+运营后台端开发为例，需要写入以下配置：

{
  "unocss.root": ["./packages/dashboard", "./packages/miniapp"]
}

TIP

新建 .vscode 文件夹后，需检查项目根目录下的 .gitignore/.hgignore 内是否忽略了 .vscode，需要去除