CSS高级处理专题
专题说明
本专题深入介绍 Vite 对 CSS 的高级处理能力，涵盖 PostCSS、预处理器深度配置等内容。
学习目标
- 掌握 PostCSS 配置与插件使用
- 理解 CSS 预处理器的高级配置
- 学会 CSS 代码分割与优化技巧
学习内容
- PostCSS 配置与应用
- Sass/Less/Stylus 深度配置
- CSS 代码分割策略
学习建议
实际配置 PostCSS 插件如 autoprefixer，体验 CSS 自动处理效果。
📝 配套习题（15 题）
💡 参考答案在文末
判断题
1
配置 css.transformer: 'lightningcss' 后，Vite 会使用 Lightning CSS 处理 CSS 文件而非 PostCSS。
2
Vite 在构建时会将异步 chunk 的 CSS 提取到单独的文件中，实现 CSS 代码分割。
3
Vite 生产构建默认使用 esbuild 对 CSS 进行压缩。
单选题
4
Vite 对哪种模块的 CSS 会自动进行代码分割？
5
在 Vite 中配置 Sass 的额外导入路径，应该使用哪个配置项？
6
配置 build.cssMinify: 'lightningcss' 的作用是什么？
7
切换到 Lightning CSS 处理 CSS 后，以下哪项功能会失效？
多选题
8
以下哪些场景适合关闭 CSS 代码分割？
9
使用 Lightning CSS 替代 esbuild 进行 CSS 压缩的优势有哪些？
10
build.cssMinify 配置项可以设置为以下哪些值？
11
Lightning CSS 相比 PostCSS 的优势有哪些？
12
配置 Lightning CSS 作为 CSS transformer 需要设置哪些选项？
13
关于 Vite CSS 代码分割，以下说法正确的有哪些？
14
以下哪些是 Vite 中 Sass/Less 预处理器的高级配置项？
15
使用 css.preprocessorOptions.scss.additionalData 配置项可以实现哪些功能？
参考答案
1.正确
2.正确
3.正确
4.C
5.C
6.B
7.C
8.A;C;D
9.A;B;C;D
10.A;B;C
11.A;B;C
12.A;B;D
13.A;B;C;D
14.A;B;C;D
15.A;B;C
想在手机上练习这套专题？
使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码
