我要招人

前端/移动开发面试题更新 2026-08-05

在 Webpack 构建流程中，为了实现 Sass 样式文件的编译，通常需要引入哪些 Loader 并完成怎样的配置？

前端/移动开发系统设计技术原理SassWebpack

考察说明

考查对 Webpack 中 Loader 作用及 Sass 编译配置的掌握。

回答思路

  1. 【回答框架 1】Sass 编译需要两个 Loader：sass-loader 负责将 Sass/SCSS 代码转换为 CSS，css-loader 负责处理 CSS 中的 import 和 url，style-loader 将 CSS 以 style 标签注入 DOM。三者按顺序从右到左执行。
  2. 【回答框架 2】配置方式：在 webpack.config.js 的 module.rules 中添加规则，test 匹配 .scss 或 .sass 文件，use 数组按顺序为 style-loader、css-loader、sass-loader。示例：{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }。
  3. 【回答框架 3】需要安装相应依赖：sass（Dart Sass 或 node-sass）、sass-loader、css-loader、style-loader，并在项目中实现。
  4. 【回答框架 4】生产环境通常将 CSS 提取为独立文件，使用 mini-css-extract-plugin 替换 style-loader，并将 css-loader 的 sourceMap 开启，便于调试。
  5. 【回答框架 5】sass-loader 支持 additionalData 选项注入全局变量，如主题变量或 mixin，避免在每个文件重复导入。
  6. 【关键点 1】sass-loader 将 Sass 编译为 CSS。
  7. 【关键点 2】css-loader 处理 CSS 的 import/url，支持 css modules。
  8. 【关键点 3】style-loader 将 CSS 注入到 DOM，生产环境用 mini-css-extract-plugin 替代。
  9. 【关键点 4】Loader 顺序固定：style-loader → css-loader → sass-loader。
  10. 【易错点 1】Loader 顺序错误会导致编译失败，必须保证 style-loader 在前，sass-loader 在后。
  11. 【易错点 2】安装依赖时，sass-loader 版本与 Webpack 版本需匹配，否则可能出现兼容性问题。
  12. 【易错点 3】默认配置下 Sass 变量无法在组件中直接使用，需通过 additionalData 或手动导入。