全部学科
Web前端
TypeScript vue CSS HTML javascript npm pinia vite
JAVA后端
maven spring Mytatis SpringMVC SpringBoot java
通用技术
redis git docker nginx mysql zookeeper rabbitmq
GO后端
golang gorm gin
Python全栈
python
NodeJS全栈
nodejs
vite / 模拟试卷

CSS高级处理专题测试

15 题 30 分钟 难度：★★

考察知识点

  • CSS 代码分割策略
  • PostCSS 高级配置
  • CSS 预处理器深度集成
  • CSS Modules 生产配置
  • CSS 压缩与优化
💡 参考答案在文末
判断题
1

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

A

对

B

错

2

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

A

对

B

错

3

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

A

对

B

错

单选题
4

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

A

所有 CSS 文件

B

仅同步导入的模块 CSS

C

仅异步导入的模块 CSS

D

使用 @import 引入的 CSS

5

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

A

css.preprocessorOptions.scss.additionalData

B

css.preprocessorOptions.scss.importer

C

css.preprocessorOptions.scss.includePaths

D

css.sassOptions.includePaths

6

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

A

关闭 CSS 压缩

B

使用 Lightning CSS 替代 esbuild 压缩 CSS

C

启用 CSS 代码分割

D

配置 CSS 预处理器

7

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

A

CSS Modules 功能

B

CSS @import 导入

C

PostCSS 插件处理

D

CSS 代码分割

多选题
8

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

A

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

B

使用 CSS Modules 的项目

C

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

D

需要控制 CSS 文件命名规则

9

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

A

压缩速度更快

B

支持更多 CSS 语法降级转换

C

支持 CSS nested 语法

D

与 Vite 的 css.transformer 配置统一

10

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

A

'esbuild' - 使用 esbuild 压缩

B

'lightningcss' - 使用 Lightning CSS 压缩

C

false - 不压缩 CSS

D

'terser' - 使用 terser 压缩

11

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

A

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

B

原生支持 CSS nested 语法

C

自动提供 CSS 语法降级

D

支持所有 PostCSS 插件

12

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

A

css.transformer: 'lightningcss'

B

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

C

build.cssMinify: 'lightningcss'

D

安装 lightningcss 包

13

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

A

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

B

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

C

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

D

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

14

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

A

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

B

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

C

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

D

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

15

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

A

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

B

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

C

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

D

覆盖 Sass 编译器的默认行为

参考答案
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
想在手机上练习这套试卷？
使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码
← 上一套试卷 CSS与样式处理专题测试
下一套试卷 → HTML与入口文件专题测试
扫码体验小程序
加载中
想在手机上刷题学习？
使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码