背景

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

添加全局样式文件

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

  
  
  
  
  

   
   
   
   
   
// vite.config.ts// 全局 scss 文件的路径const variablePath = path.resolve("./src/variable.scss");
export default defineConfig({  // css 相关的配置  css: {    preprocessorOptions: {      scss: {        // additionalData 的内容会在每个 scss 文件的开头自动注入        additionalData: `@import "${variablePath}";`      }    }  }})
  
  
  
  
  

CSS Modules

  
  
  
  
  

   
   
   
   
   
// index.tsximport styles './index.module.scss';export function Header() {  return <p className={styles.header}>This is Header</p>};
  
  
  
  
  

PostCSS自动添加css兼容前缀

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

  
  
  
  
  

   
   
   
   
   
pnpm i autoprefixer -D
  
  
  
  
  

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

  
  
  
  
  

   
   
   
   
   
// vite.config.ts 增加如下的配置
export default {  css: {    // 进行 PostCSS 配置    postcss: {      plugins: [        autoprefixer({          // 指定目标浏览器          overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']        })      ]    }  }}
  
  
  
  
  

CSS 原子化框架

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

  
  
  
  
  

   
   
   
   
   
pnpm i windicss vite-plugin-windicss -D
  
  
  
  
  

  
  
  
  
  

   
   
   
   
   
// vite.config.tsimport windi from "vite-plugin-windicss";
export default {  plugins: [    // 省略其它插件    windi()  ]}
  
  
  
  
  

  
  
  
  
  

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

  
  
  
  
  

   
   
   
   
   
// src/components/Header/index.tsximport { devDependencies } from "../../../package.json";
export function Header() {  return (    <div className="p-20px text-center">      <h1 className="font-bold text-2xl mb-2">        vite version: {devDependencies.vite}      </h1>    </div>  );}
  
  
  
  
  

windicss的 attributify 和 shortcuts

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

  
  
  
  
  

   
   
   
   
   
  
  
  
  
  
  
  
  
  
  

   
   
   
   
   
import { defineConfig } from "vite-plugin-windicss";
export default defineConfig({  // 开启 attributify  attributify: true,});
  
  
  
  
  
  
  
  
  
  

   
   
   
   
   
  
  
  
  
  

  
  
  
  
  

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

  
  
  
  
  

   
   
   
   
   
//windi.config.tsimport { defineConfig } from "vite-plugin-windicss";
export default defineConfig({  attributify: true,  shortcuts: {    "flex-c": "flex justify-center items-center",  }});
  
  
  
  
  

  
  
  
  
  

   
   
   
   
   
<div className="flex-c"></div><!-- 等同于下面这段 --><div className="flex justify-center items-center"></div>
  
  
  
  
  
扫一扫，加入技术交流群