文章目录
一、Vite 中 CSS 的基础配置1. CSS 配置概述2. Vite 的默认行为 二、CSS 配置项详解1. `preprocessorOptions`2. `modules`3. `postcss` 三、CSS 预处理器的配置1. 配置 Sass2. 配置 Less3. 配置 Stylus 四、CSS 代码分割1. 动态导入中的 CSS 处理2. 禁用 CSS 代码分割 五、CSS 的压缩与优化1. 自定义 CSS 压缩 六、总结
Vite 是一个新一代前端构建工具，具有极快的冷启动速度和优秀的热更新体验。本文将详细介绍如何在 vite.config.js 中进行 CSS 的相关配置，帮助你更好地掌控样式的加载与处理。通过配置，你可以定制 CSS 的加载方式、模块化处理以及与预处理器的集成。
一、Vite 中 CSS 的基础配置
1. CSS 配置概述
在 Vite 项目中，CSS 的加载与处理是默认支持的。Vite 支持 PostCSS、Sass、Less 等预处理器，并且自动将 .css 文件模块化处理。同时，你也可以通过配置来定制更复杂的需求，例如 CSS 的自动导入、样式变量的全局定义等。
Vite 的 CSS 配置主要在 vite.config.js 文件中进行，具体的 CSS 配置项都放置在 css 对象中。
2. Vite 的默认行为
Vite 默认支持以下特性：
模块化：所有 CSS 文件默认会进行 CSS 模块化处理。自动添加浏览器前缀：Vite 会根据PostCSS 的 Autoprefixer 插件为你的 CSS 自动添加浏览器前缀。预处理器支持：Vite 自动支持常见的 CSS 预处理器如 Sass、Less 和 Stylus。 二、CSS 配置项详解
在 Vite 中，你可以通过 vite.config.js 文件的 css 选项来定制 CSS 相关的行为。下面我们会详细介绍每个配置项及其用途。
1. preprocessorOptions
preprocessorOptions 允许你为 CSS 预处理器提供全局的配置选项，例如全局变量的定义、混入（mixins）的使用等。常见的预处理器如 Sass 和 Less 都支持在此配置。
示例代码：
export default { css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/variables.scss";` }, less: { modifyVars: { 'primary-color': '#1DA57A', }, javascriptEnabled: true } } }}scss.additionalData：允许你在每个 .scss 文件的开头自动注入一些全局的样式变量或混入。less.modifyVars：用于修改 Less 的变量，在这里我们修改了 primary-color 的值为 #1DA57A。 2. modules
modules 配置用于控制 CSS 模块化处理的行为。CSS 模块化是指每个 .css 文件中的类名和动画名称都会被哈希化，避免全局冲突。在 Vite 中，CSS 模块化是默认开启的。
你可以通过 modules 来自定义模块化处理的规则：
export default { css: { modules: { scopeBehaviour: 'local', globalModulePaths: [/global\.css$/], generateScopedName: '[name]__[local]___[hash:base64:5]', } }}scopeBehaviour：决定 CSS 是默认作用于局部还是全局。可选值为 local（局部，默认值）和 global（全局）。globalModulePaths：可以通过正则表达式指定哪些文件不参与模块化处理。generateScopedName：定义生成类名的规则。默认情况下是 [hash:base64]，你可以自定义为更易读的格式，例如 [name]__[local]___[hash:base64:5]。 3. postcss
postcss 选项允许你为 Vite 提供 PostCSS 配置。在 Vite 中，PostCSS 的配置通常放在根目录下的 postcss.config.js 文件中，但你也可以直接在 vite.config.js 中进行配置。
示例代码：
export default { css: { postcss: { plugins: [ require('autoprefixer'), require('postcss-nested') ] } }}plugins：PostCSS 的插件数组，在这里我们使用了 autoprefixer 插件为 CSS 添加浏览器前缀，以及 postcss-nested 插件支持嵌套规则的写法。 三、CSS 预处理器的配置
Vite 支持多种 CSS 预处理器，例如 Sass、Less 和 Stylus。你可以通过 preprocessorOptions 来为这些预处理器提供配置。
1. 配置 Sass
Sass 是目前最流行的 CSS 预处理器之一。通过 Vite，使用 Sass 变得非常简单。你只需安装 sass 包即可直接在项目中使用 .scss 文件。
示例配置：
export default { css: { preprocessorOptions: { scss: { additionalData: `@import "@/styles/variables.scss";` } } }}通过 additionalData，我们可以将全局变量或混入直接引入到每个 .scss 文件中，而不需要每次手动引入。
2. 配置 Less
Less 是另一种常见的 CSS 预处理器，广泛用于 Ant Design 等前端 UI 框架中。使用 Less 时，你可以在 preprocessorOptions 中定义全局的变量和修改项。
示例配置：
export default { css: { preprocessorOptions: { less: { javascriptEnabled: true, modifyVars: { 'primary-color': '#ff0000' } } } }}在这个例子中，我们启用了 Less 的 javascriptEnabled 选项，并修改了全局的 primary-color 变量。
3. 配置 Stylus
Stylus 是一款灵活的 CSS 预处理器，支持极简的语法风格。你可以像配置 Sass 和 Less 一样，在 Vite 中为 Stylus 提供全局配置。
示例配置：
export default { css: { preprocessorOptions: { styl: { import: ['~@/styles/variables.styl'] } } }}在这个配置中，我们全局导入了 Stylus 变量文件，使得这些变量可以在项目中的任何 .styl 文件中直接使用。
四、CSS 代码分割
Vite 默认支持 CSS 代码分割，意味着当你使用动态导入（dynamic import）时，Vite 会自动将相应的 CSS 也分割到单独的文件中。这样可以有效减少初始加载时间，提高性能。
1. 动态导入中的 CSS 处理
当你在项目中使用动态导入时，Vite 会自动将相关的 CSS 提取到一个独立的文件中。例如：
import('./MyComponent.vue');在这个例子中，Vite 会将 MyComponent.vue 中的 CSS 提取到一个单独的 .css 文件中，并在组件加载时动态加载这个 CSS 文件。
2. 禁用 CSS 代码分割
如果你不希望 Vite 对 CSS 进行分割，你可以通过以下配置来禁用 CSS 代码分割：
export default { build: { cssCodeSplit: false }}在这个配置中，我们设置 cssCodeSplit: false，这样所有的 CSS 都会被打包到一个文件中。
五、CSS 的压缩与优化
在生产环境中，Vite 会自动对 CSS 进行压缩，以减小文件体积，提高加载速度。你可以通过 minify 选项来自定义压缩行为。
1. 自定义 CSS 压缩
Vite 使用 esbuild 作为默认的 CSS 压缩工具，你可以通过 build.minify 来选择压缩工具：
export default { build: { minify: 'esbuild' }}你还可以通过配置 css.minify 来更细粒度地控制 CSS 的压缩行为。
六、总结
Vite 提供了强大的 CSS 配置功能，使得开发者可以根据项目需求灵活地处理 CSS。无论是全局变量的定义、CSS 模块化处理，还是预处理器的支持与配置，Vite 都能很好地满足前端开发中的各种需求。通过本文的介绍，相信你已经对 Vite 中的 CSS 配置有了更深入的了解，并能够在实际项目中灵活应用这些配置，从而提升开发效率与项目性能。
推荐：
JavaScriptreactvue