文章目录
- 一、Vite 中 CSS 的基础配置
- 1. CSS 配置概述
- 2. Vite 的默认行为
- 二、CSS 配置项详解
- 1. `preprocessorOptions`
- 2. `modules`
- 3. `postcss`
- 三、CSS 预处理器的配置
- 1. 配置 Sass
- 2. 配置 Less
- 3. 配置 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 配置有了更深入的了解，并能够在实际项目中灵活应用这些配置，从而提升开发效率与项目性能。
推荐：
- JavaScript
- react
- vue
