CSS高级处理专题测试

对

错

所有 CSS 文件

仅同步导入的模块 CSS

仅异步导入的模块 CSS

使用 @import 引入的 CSS

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

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

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

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

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

使用 CSS Modules 的项目

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

需要控制 CSS 文件命名规则

对

错

关闭 CSS 压缩

使用 Lightning CSS 替代 esbuild 压缩 CSS

启用 CSS 代码分割

配置 CSS 预处理器

'esbuild' - 使用 esbuild 压缩

'lightningcss' - 使用 Lightning CSS 压缩

false - 不压缩 CSS

'terser' - 使用 terser 压缩

压缩速度更快

支持更多 CSS 语法降级转换

支持 CSS nested 语法

与 Vite 的 css.transformer 配置统一

对

错

CSS Modules 功能

CSS @import 导入

PostCSS 插件处理

CSS 代码分割

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

原生支持 CSS nested 语法

自动提供 CSS 语法降级

支持所有 PostCSS 插件

css.transformer: 'lightningcss'

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

build.cssMinify: 'lightningcss'

安装 lightningcss 包

css.preprocessorOptions.scss.additionalData

css.preprocessorOptions.scss.importer

css.preprocessorOptions.scss.includePaths

css.sassOptions.includePaths

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

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

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

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

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

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

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

覆盖 Sass 编译器的默认行为