《从零开始学习Vite》 第二章：接入 CSS 工程化方案

系列文章

在系列中，将从零学习Vite，系统梳理 Vite 本身的知识，也包括 Vite 底层所使用的 Esbuild、Rollup 双引擎、Babel 编译工具链、模块规范标准等等构建生态。

《从零开始学习Vite》 第一章：搭建前端项目

《从零开始学习Vite》 第二章：接入 CSS 工程化方案

《从零开始学习Vite》 第三章：静态资源处理

《从零开始学习Vite》第四章：自动化代码规范工具的使用

前言

CSS 方案是前端工程化必不可缺的，在最原始的开发阶段都是手写原生的 CSS，但原生 CSS 存在浏览器兼容问题、开发体验差、样式污染、打包产物体积过大等诸多问题，因此社区出现了不少 CSS 工程化解决方案，有CSS 预处理器、CSS Modules、PostCSS 、CSS in JS 和 CSS 原子化框架，下面我们将在 Vite 中落地这些 CSS 工程化方案。

CSS 预处理器

这种方案自定义了一套语法来生成 CSS 的程序，让 CSS 可以像编程语言一样定义变量、写条件判断，代码混合，嵌套以及代码模块化。

Vite 本身对 CSS 各种预处理器（Sass、Less、Stylus）做了内置支持，我们无需做任何的配置就可以直接使用Sass、Less和Stylus，但是 Vite 为了实现按需加载，并没有内置这些工具库，需要我们根据自己的需求安装。这里我们以 Sass 预处理器为例，其他预处理器（Less、Stylus）如果有需要你可以去官方文档中查阅更多的配置项，安装 Sass 的官方库：

pnpm add -D sass

现在我们封装一个全局的主题色，新建 src/styles/variable.scss 文件，内容如下：

$theme-color: blue;

接着在 Vite 中进行自定义配置实现自动引入 variable.scss文件，在vite.config.ts 文件中增加如下的内容：

import path from 'path';
import {
    normalizePath } from 'vite';

// 全局scss文件的路径
// 用normalizePath 解决window下的路径问题
const variablePath = normalizePath(path.resolve('./src/styles/variable.scss'));

export default defineConfig({
   
  // css相关的配置
  css: