什么是unocss

• unocss是一個(gè)即時(shí)的原子CSS引擎，它可以讓你用簡(jiǎn)短的類(lèi)名來(lái)控制元素的樣式，而不需要寫(xiě)復(fù)雜的CSS代碼。
• 當(dāng)然，原子樣式也有很多選擇，最著名的就是 Tailwind。但由于Tailwind 會(huì)生成大量樣式定義，會(huì)導(dǎo)致全量的 CSS 文件往往體積會(huì)多至數(shù) MB，從而有性能上有一些不足

?

擴(kuò)展：什么是原子化

原子化CSS是一種CSS架構(gòu)方式，其支持小型、單一用途的類(lèi)，其名稱(chēng)基于視覺(jué)功能。

更加通俗的來(lái)講，原子化CSS是一種新的CSS編程思路，它傾向于創(chuàng)建小巧且單一用途的class，并且以視覺(jué)效果進(jìn)行命名。

?

unocss的優(yōu)點(diǎn)

• 它可以讓你快速地開(kāi)發(fā)和原型設(shè)計(jì)，而不需要考慮CSS的細(xì)節(jié)。
• 它可以讓你的CSS文件更小，因?yàn)樗簧赡阌玫降墓ぞ哳?lèi)。
• 它可以讓你的CSS更一致，因?yàn)樗裱惶最A(yù)設(shè)的規(guī)則和變量。
• 它可以讓你的CSS更靈活，因?yàn)樗С肿远x工具類(lèi)，變體，指令和圖標(biāo)。
• 它可以讓你的CSS更易于維護(hù)，因?yàn)樗苊饬藰邮經(jīng)_突和重復(fù)代碼。

項(xiàng)目中使用 unocss

參考 官方文檔Vite配置，webpack 往下翻即可

?

https://unocss.dev/integrations/vite

?

安裝

npm install -D unocss

打包配置

vite配置

// vite.config.js
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

webpack5中配置

// webpack.config.js
const UnoCSS = require('@unocss/webpack').default

module.exports = {
  plugins: [
    UnoCSS(),
  ],
  optimization: {
    realContentHash: true,
  },
}

webopack4中配置

// webpack.config.js
const UnoCSS = require('@unocss/webpack').default

module.exports = {
  plugins: [
    UnoCSS(),
  ],
  css: {
    extract: {
      filename: '[name].[hash:9].css',
    },
  },
}

創(chuàng)建一個(gè)`uno.config.ts 配置文件

• 用于編寫(xiě)用戶(hù)想要的 unocss 配置

// uno.config.js
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

全局引入

 // main.js
import 'virtual:uno.css';

常見(jiàn)用法

• 對(duì)應(yīng)剛?cè)胧?unocss 的同學(xué)來(lái)說(shuō)，規(guī)則怎么寫(xiě)是不知道的，但不用著急，官方（大佬 antfu）給出了 交互式文檔，輸入你想要的css樣式，就可以獲得對(duì)應(yīng)的class名稱(chēng)

?

https://www.tailwindcss.cn/docs/font-family(中文文檔)

https://unocss.dev/interactive/(官方文檔)

?

常見(jiàn)基礎(chǔ)用法

?

unocss支持用預(yù)設(shè)單位（預(yù)設(shè)單位是rem），也可以自定義單位

?

自定義規(guī)則

• 在vscode中我們都會(huì)有用到快捷鍵一鍵生成代碼，unocss也不例外，假如你有個(gè)盒子，里面的內(nèi)容需要垂直居中，那么就可以定義為：

export default defineConfig({
  shortcuts: [
   {'flex-center': 'flex items-center justify-center',}, // 靜態(tài)快捷方式，是一個(gè)對(duì)象，可配多個(gè)
  ]
})

• 當(dāng)然，也可以精選 動(dòng)態(tài)配置快捷方式

export default defineConfig({
 shortcuts: [
    [/^base-border-(.*)$/, match => `border-1 border-style-dashed border-${match[1]}`], // 動(dòng)態(tài)快捷方式，一個(gè)配置為一個(gè)數(shù)組
  ]
})

安裝vscode插件

• 安裝啟用后，頁(yè)面上就能看出哪些 class 使用 unocss 提供 （帶有虛線），并且能顯示類(lèi)名對(duì)應(yīng)的樣式內(nèi)容，如下：

?

好啦，今天的分享就到這里，希望能幫助到大家，大家也不要吝嗇你們的贊喲。

?