作者：京东物流 刘微微

背景

好的css工程化方案可以增强我们项目的可维护性、提高样式的复用性、进行自动化处理等，在提高页面加载速度和性能的同时，我们可以有更多的精力进行js逻辑的处理。

添加全局样式文件

使用场景： 有一个scss/less文件，此文件中定义了一些全局变量，需要在其他的样式文件中使用，此时需要将这些变量放在全局

1// vite.config.ts
2// 全局 scss 文件的路径
3const variablePath = path.resolve("./src/variable.scss");
4
5export default defineConfig({
6  // css 相关的配置
7  css: {
8    preprocessorOptions: {
9      scss: {
10        // additionalData 的内容会在每个 scss 文件的开头自动注入
11        additionalData: `@import "${variablePath}";`
12      }
13    }
14  }
15})

CSS Modules

CSS Modules 在 Vite 也是一个开箱即用的能力，Vite 会对后缀带有.module的样式文件自动应用 CSS Modules。接下来我们通过一个简单的例子来使用这个功能。

首先，将 Header 组件中的index.scss更名为index.module.scss，然后稍微改动一下index.tsx的内容，如下:

1// index.tsx
2import styles './index.module.scss';
3export function Header() {
4  return <p className={styles.header}>This is Header</p>
5};

PostCSS自动添加css兼容前缀

一般你可以通过 postcss.config.js 来进行 postcss 的配置，不过在 Vite 配置文件中已经提供了 PostCSS 的配置入口，我们可以直接在 Vite 配置文件中进行操作。

首先，我们来安装一个常用的 PostCSS 插件——autoprefixer:

pnpm i autoprefixer -D

这个插件主要用来自动为不同的目标浏览器添加样式前缀，解决的是浏览器兼容性的问题。接下来让我们在 Vite 中接入这个插件:

1// vite.config.ts 增加如下的配置
2
3export default {
4  css: {
5    // 进行 PostCSS 配置
6    postcss: {
7      plugins: [
8        autoprefixer({
9          // 指定目标浏览器
10          overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
11        })
12      ]
13    }
14  }
15}

CSS 原子化框架

在目前的社区当中，CSS 原子化框架主要包括Tailwind CSS 和 Windi CSS。Windi CSS 作为前者的替换方案，实现了按需生成 CSS 类名的功能，开发环境下的 CSS 产物体积大大减少，速度上比Tailwind CSS v2快 20~100 倍！当然，Tailwind CSS 在 v3 版本也引入 JIT(即时编译) 的功能，解决了开发环境下 CSS 产物体积庞大的问题，但这也是后来的事情了。接下来我们还是选择 Windi CSS 作为 CSS 原子化框架来接入到 Vite 中。

首先安装 windicss 及对应的 Vite 插件:

pnpm i windicss vite-plugin-windicss -D

随后我们在配置文件中来使用它:

1// vite.config.ts
2import windi from "vite-plugin-windicss";
3
4export default {
5  plugins: [
6    // 省略其它插件
7    windi()
8  ]
9}

接着要注意在src/main.tsx中引入一个必需的 import 语句:

1// main.tsx
2// 用来注入 Windi CSS 所需的样式，一定要加上！
3import "virtual:windi.css";

这样我们就完成了 Windi CSS 在 Vite 中的接入，接下来我们在 Header 组件中来测试，组件代码修改如下:

1// src/components/Header/index.tsx
2import { devDependencies } from "../../../package.json";
3
4export function Header() {
5  return (
6    <div className="p-20px text-center">
7      <h1 className="font-bold text-2xl mb-2">
8        vite version: {devDependencies.vite}
9      </h1>
10    </div>
11  );
12}

windicss的 attributify 和 shortcuts

除了本身的原子化 CSS 能力，Windi CSS 还有一些非常好用的高级功能，在此我给大家推荐自己常用的两个能力: attributify 和 shortcuts。

要开启这两个功能，我们需要在项目根目录新建windi.config.ts，配置如下:

1import { defineConfig } from "vite-plugin-windicss";
2
3export default defineConfig({
4  // 开启 attributify
5  attributify: true,
6});

首先我们来看看attributify，翻译过来就是属性化，也就是说我们可以用 props 的方式去定义样式属性，如下所示:

1<button 
2  bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
3  text="sm white"
4  font="mono light"
5  p="y-2 x-4"
6  border="2 rounded blue-200"
7>
8  Button
9</button>

这样的开发方式不仅可以省去了繁琐的 className 内容，而且还加强了语义化，代码更容易维护，可以说大大提升了开发体验。

shortcuts 用来封装一系列的原子化能力，尤其是一些常见的类名集合，我们在 windi.config.ts来配置它:

1//windi.config.ts
2import { defineConfig } from "vite-plugin-windicss";
3
4export default defineConfig({
5  attributify: true,
6  shortcuts: {
7    "flex-c": "flex justify-center items-center",
8  }
9});

比如这里封装了flex-c的类名，接下来我们可以在业务代码直接使用这个类名:

1<div className="flex-c"></div>
2<!-- 等同于下面这段 -->
3<div className="flex justify-center items-center"></div>