CSS高级处理专题

专题说明

本专题深入介绍 Vite 对 CSS 的高级处理能力，涵盖 PostCSS、预处理器深度配置等内容。

学习目标

掌握 PostCSS 配置与插件使用
理解 CSS 预处理器的高级配置
学会 CSS 代码分割与优化技巧

学习内容

PostCSS 配置与应用
Sass/Less/Stylus 深度配置
CSS 代码分割策略

学习建议

实际配置 PostCSS 插件如 autoprefixer，体验 CSS 自动处理效果。

📝 发现内容有误？点击此处直接编辑

📝 配套习题（15 题）

判断题

Vite 在构建时会将异步 chunk 的 CSS 提取到单独的文件中，实现 CSS 代码分割。

对

错

单选题

Vite 对哪种模块的 CSS 会自动进行代码分割？

所有 CSS 文件

仅同步导入的模块 CSS

仅异步导入的模块 CSS

使用 @import 引入的 CSS

多选题

关于 Vite CSS 代码分割，以下说法正确的有哪些？

异步 chunk 的 CSS 自动提取为独立文件

同步 chunk 的 CSS 合并到主样式文件

CSS 代码分割可通过 build.cssCodeSplit 配置关闭

CSS 分割文件会在 chunk 加载时自动注入页面

多选题

以下哪些场景适合关闭 CSS 代码分割？

需要将所有 CSS 合并为单个文件减少请求

使用 CSS Modules 的项目

构建库模式时不需要 CSS 分割

需要控制 CSS 文件命名规则

判断题

Vite 生产构建默认使用 esbuild 对 CSS 进行压缩。

对

错

单选题

配置 build.cssMinify: 'lightningcss' 的作用是什么？

关闭 CSS 压缩

使用 Lightning CSS 替代 esbuild 压缩 CSS

启用 CSS 代码分割

配置 CSS 预处理器

多选题

build.cssMinify 配置项可以设置为以下哪些值？

'esbuild' - 使用 esbuild 压缩

'lightningcss' - 使用 Lightning CSS 压缩

false - 不压缩 CSS

'terser' - 使用 terser 压缩

多选题

使用 Lightning CSS 替代 esbuild 进行 CSS 压缩的优势有哪些？

压缩速度更快

支持更多 CSS 语法降级转换

支持 CSS nested 语法

与 Vite 的 css.transformer 配置统一

判断题

配置 css.transformer: 'lightningcss' 后，Vite 会使用 Lightning CSS 处理 CSS 文件而非 PostCSS。

对

错

单选题

切换到 Lightning CSS 处理 CSS 后，以下哪项功能会失效？

CSS Modules 功能

CSS @import 导入

PostCSS 插件处理

CSS 代码分割

多选题

Lightning CSS 相比 PostCSS 的优势有哪些？

处理速度更快，基于 Rust 编写

原生支持 CSS nested 语法

自动提供 CSS 语法降级

支持所有 PostCSS 插件

多选题

配置 Lightning CSS 作为 CSS transformer 需要设置哪些选项？

css.transformer: 'lightningcss'

css.lightningcss.targets 配置目标浏览器

build.cssMinify: 'lightningcss'

安装 lightningcss 包

单选题

在 Vite 中配置 Sass 的额外导入路径，应该使用哪个配置项？

css.preprocessorOptions.scss.additionalData

css.preprocessorOptions.scss.importer

css.preprocessorOptions.scss.includePaths

css.sassOptions.includePaths

多选题

以下哪些是 Vite 中 Sass/Less 预处理器的高级配置项？

css.preprocessorOptions.scss.additionalData - 注入全局内容

css.preprocessorOptions.scss.includePaths - 额外导入路径

css.preprocessorOptions.less.math - Less 数学计算模式

css.preprocessorOptions.sass.silenceDepWarnings - 抑制依赖警告

多选题

使用 css.preprocessorOptions.scss.additionalData 配置项可以实现哪些功能？

在每个 Sass 文件顶部注入全局变量

在每个 Sass 文件顶部注入全局 mixin

在每个 Sass 文件顶部导入共享文件

覆盖 Sass 编译器的默认行为