研發(fā)都應(yīng)該了解的如何在vite中接入現(xiàn)代化css工程化方案

作者：京東物流 劉微微

背景

好的css工程化方案可以增強(qiáng)我們項目的可維護(hù)性、提高樣式的復(fù)用性、進(jìn)行自動化處理等，在提高頁面加載速度和性能的同時，我們可以有更多的精力進(jìn)行js邏輯的處理。

添加全局樣式文件

使用場景： 有一個scss/less文件，此文件中定義了一些全局變量，需要在其他的樣式文件中使用，此時需要將這些變量放在全局

// vite.config.ts
// 全局 scss 文件的路徑
const variablePath = path.resolve("./src/variable.scss");

export default defineConfig({
  // css 相關(guān)的配置
  css: {
    preprocessorOptions: {
      scss: {
        // additionalData 的內(nèi)容會在每個 scss 文件的開頭自動注入
        additionalData: `@import "${variablePath}";`
      }
    }
  }
})

CSS Modules

CSS Modules 在 Vite 也是一個開箱即用的能力，Vite 會對后綴帶有.module的樣式文件自動應(yīng)用 CSS Modules。接下來我們通過一個簡單的例子來使用這個功能。

首先，將 Header 組件中的index.scss更名為index.module.scss，然后稍微改動一下index.tsx的內(nèi)容，如下:

// index.tsx
import styles './index.module.scss';
export function Header() {
  return This is Header
};

PostCSS自動添加css兼容前綴

一般你可以通過 postcss.config.js 來進(jìn)行 postcss 的配置，不過在 Vite 配置文件中已經(jīng)提供了 PostCSS 的配置入口，我們可以直接在 Vite 配置文件中進(jìn)行操作。

首先，我們來安裝一個常用的 PostCSS 插件——autoprefixer:

pnpm i autoprefixer -D

這個插件主要用來自動為不同的目標(biāo)瀏覽器添加樣式前綴，解決的是瀏覽器兼容性的問題。接下來讓我們在 Vite 中接入這個插件:

// vite.config.ts 增加如下的配置

export default {
  css: {
    // 進(jìn)行 PostCSS 配置
    postcss: {
      plugins: [
        autoprefixer({
          // 指定目標(biāo)瀏覽器
          overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
        })
      ]
    }
  }
}

CSS 原子化框架

在目前的社區(qū)當(dāng)中，CSS 原子化框架主要包括Tailwind CSS 和 Windi CSS。Windi CSS 作為前者的替換方案，實(shí)現(xiàn)了按需生成 CSS 類名的功能，開發(fā)環(huán)境下的 CSS 產(chǎn)物體積大大減少，速度上比Tailwind CSS v2快 20~100 倍！當(dāng)然，Tailwind CSS 在 v3 版本也引入 JIT(即時編譯) 的功能，解決了開發(fā)環(huán)境下 CSS 產(chǎn)物體積龐大的問題，但這也是后來的事情了。接下來我們還是選擇 Windi CSS 作為 CSS 原子化框架來接入到 Vite 中。

首先安裝 windicss 及對應(yīng)的 Vite 插件:

pnpm i windicss vite-plugin-windicss -D

隨后我們在配置文件中來使用它:

// vite.config.ts
import windi from "vite-plugin-windicss";

export default {
  plugins: [
    // 省略其它插件
    windi()
  ]
}

接著要注意在src/main.tsx中引入一個必需的 import 語句:

// main.tsx
// 用來注入 Windi CSS 所需的樣式，一定要加上！
import "virtual:windi.css";

這樣我們就完成了 Windi CSS 在 Vite 中的接入，接下來我們在 Header 組件中來測試，組件代碼修改如下:

// src/components/Header/index.tsx
import { devDependencies } from "../../../package.json";

export function Header() {
  return (
    

windicss的 attributify 和 shortcuts

除了本身的原子化 CSS 能力，Windi CSS 還有一些非常好用的高級功能，在此我給大家推薦自己常用的兩個能力: attributify 和 shortcuts。

要開啟這兩個功能，我們需要在項目根目錄新建windi.config.ts，配置如下:

import { defineConfig } from "vite-plugin-windicss";

export default defineConfig({
  // 開啟 attributify
  attributify: true,
});

首先我們來看看attributify，翻譯過來就是屬性化，也就是說我們可以用 props 的方式去定義樣式屬性，如下所示:

  Button

這樣的開發(fā)方式不僅可以省去了繁瑣的 className 內(nèi)容，而且還加強(qiáng)了語義化，代碼更容易維護(hù)，可以說大大提升了開發(fā)體驗。

shortcuts 用來封裝一系列的原子化能力，尤其是一些常見的類名集合，我們在 windi.config.ts來配置它:

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

export default defineConfig({
  attributify: true,
  shortcuts: {
    "flex-c": "flex justify-center items-center",
  }
});

比如這里封裝了flex-c的類名，接下來我們可以在業(yè)務(wù)代碼直接使用這個類名: