【Vite】对 CSS 的处理详解

Vite 是一个新型的前端构建工具，凭借着超快的热更新、轻量的配置和高效的开发体验迅速获得了广泛的使用。作为现代 Web 开发的一部分，CSS 是不可或缺的，Vite 对 CSS 的处理方式也极为高效且灵活。本文将深入探讨 Vite 如何处理 CSS 及其相关配置，帮助开发者最大化地利用 Vite 提升开发效率。

一、Vite 中的 CSS 处理概述

1. Vite 对 CSS 的默认支持

Vite 默认支持 .css 文件的引入，开发者可以像传统 Web 开发一样直接在 JavaScript 或 TypeScript 文件中引入 CSS：

import './style.css';

Vite 会自动处理这些 CSS 文件，包括将其注入到浏览器中的 <style> 标签中。除此之外，Vite 还支持自动处理 CSS 变量、自动添加前缀等现代特性。这使得开发者可以无缝地使用现代 CSS 特性，而无需手动配置复杂的工具链。

2. 内联 CSS 与外部 CSS

Vite 会根据具体情况决定是否将 CSS 文件内联到 JavaScript 文件中，或是将其作为独立文件进行处理。对于较小的 CSS 文件，Vite 可能会将其内联到 JavaScript 中，以减少 HTTP 请求的数量。对于较大的 CSS 文件，Vite 会将其分离为独立的 CSS 文件，从而提升页面加载性能。

二、CSS 模块化支持

1. 什么是 CSS 模块化

CSS 模块化是一种防止 CSS 全局污染的技术。在大型项目中，不同组件之间的样式可能相互冲突，CSS 模块化则通过生成独特的类名来解决这个问题。Vite 默认支持 CSS 模块化，开发者只需要在文件名后缀中使用 .module.css，即可启用该特性。

/* style.module.css */
.header {
  color: blue;
}

在 JavaScript 文件中引入 CSS 模块时，Vite 会自动为每个类名生成独特的哈希值，以避免全局命名冲突：

import styles from './style.module.css';

console.log(styles.header); // 生成唯一的 class 名

2. CSS 模块的配置与自定义

Vite 提供了对 CSS 模块化的自定义配置，例如可以自定义生成的类名格式。通过在 vite.config.js 中设置 css.modules，开发者可以控制 CSS 模块的行为：

export default {
  css: {
    modules: {
      scopeBehaviour: 'local', // 全局或者局部
      generateScopedName: '[name]__[local]___[hash:base64:5]', // 自定义生成类名的格式
    }
  }
}

这种灵活性使得 Vite 的 CSS 模块化功能可以很好地适应不同规模的项目需求。

三、PostCSS 的集成

1. PostCSS 简介

PostCSS 是一个强大的 CSS 处理工具，通过插件系统可以对 CSS 进行各种转换和优化，例如自动添加浏览器前缀、支持现代 CSS 特性等。Vite 对 PostCSS 有内置支持，开发者只需要提供一个 postcss.config.js 文件，Vite 就会自动根据配置处理 CSS。

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

2. PostCSS 的定制化处理

开发者可以根据项目需求自由配置 PostCSS 插件。例如，除了自动添加前缀外，还可以使用 postcss-nested 来支持嵌套 CSS 语法，或者使用 cssnano 来压缩生产环境下的 CSS 文件。

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-nested'),
    require('cssnano')({
      preset: 'default',
    }),
  ],
};

四、预处理器的支持

1. Sass、Less 和 Stylus 的支持

Vite 默认支持 Sass、Less 和 Stylus 等常见的 CSS 预处理器。开发者只需要安装对应的预处理器包，就可以在项目中直接使用这些预处理器来编写样式文件。例如，要使用 Sass，首先需要安装 sass 依赖：

npm install -D sass

然后在项目中引入 .scss 或 .sass 文件即可：

import './styles.scss';

Vite 会自动处理这些文件，无需额外的配置。同时，Vite 支持通过 @import 或 @use 语法在样式文件中引入其他 Sass 文件，确保项目结构的清晰性和模块化。

2. CSS 预处理器的配置

开发者还可以通过 vite.config.js 文件对 CSS 预处理器进行进一步的配置。例如，如果需要传递额外的选项给 Sass，可以这样配置：

export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `$injectedColor: orange;`
      },
    },
  },
};

这种方式允许开发者在每个 Sass 文件中自动注入一些全局变量或配置，减少重复定义的工作量。

五、HMR（热模块替换）与 CSS 的结合

Vite 的一个核心特点是其超快的 HMR（热模块替换）功能。当开发者修改了 CSS 文件时，Vite 会即时在浏览器中进行更新，而无需刷新整个页面。这在开发体验上带来了极大的提升，开发者可以快速看到修改的效果，而不需要等待传统工具中的全量编译。

1. CSS 热更新的工作原理

Vite 使用的是基于 ES 模块的开发服务器，它通过监听文件的修改来判断是否需要触发热更新。当检测到 CSS 文件发生变化时，Vite 会以最小的代价只更新相关的样式，而不会影响 JavaScript 逻辑。

// 在开发环境中修改 CSS 后，Vite 会通过 HMR 实时更新样式

这种细粒度的更新机制确保了开发过程的流畅性，极大提高了开发效率。

六、生产环境下的 CSS 处理

1. CSS 文件的分离与压缩

在生产环境中，Vite 会将所有的 CSS 文件提取到单独的文件中，以便于浏览器更好地缓存和处理。此外，Vite 还会自动对 CSS 进行压缩，去除无用的空格和注释，以减少文件体积。

npm run build

运行生产构建命令后，Vite 会输出经过优化的 CSS 文件，并确保在浏览器端能够以最快的速度加载。

2. 样式的按需加载

Vite 还支持对样式的按需加载。对于大型应用来说，按需加载可以显著提升首屏加载性能。开发者可以使用动态 import 来按需加载特定页面或组件的样式文件。

import('./styles/about.css').then(() => {
  // 样式加载完成
});

这种方式尤其适合于多页面应用或单页应用中不同页面的样式差异较大的情况。

七、总结

Vite 对 CSS 的处理在开发体验与性能优化之间找到了完美的平衡。无论是开发中的热更新，还是生产环境下的优化与压缩，Vite 都提供了强大而灵活的功能。通过合理地配置和使用 Vite 的 CSS 处理能力，开发者可以在保持高效开发的同时，打造性能优异的现代 Web 应用。

推荐：

• JavaScript
• react
• vue

---