如何在Webpack中配置SCSS编译为CSS-css教程-PHP中文网

sass-loader必须放在css-loader前面，因为sass-loader负责将.scss源码编译为标准css字符串，css-loader才能解析其中的@import、url()及模块化逻辑；顺序颠倒会导致语法错误。

如何在webpack中配置scss编译为css

Webpack 本身不编译 SCSS，必须靠 sass-loader 链式处理，且顺序不能错：sass-loader → css-loader → MiniCssExtractPlugin.loader（生产）或 style-loader（开发）。

为什么 `sass-loader` 必须放在 `css-loader` 前面

sass-loader 负责把 .scss 源码转成标准 CSS 字符串；css-loader 才能接着解析其中的 @import、url() 和模块化逻辑。顺序反了会报错，比如 Invalid CSS after "...": expected 1 selector or at-rule, was "body { color: red;"。

sass-loader 输出的是原始 CSS 文本，不含模块信息
css-loader 把这段文本转成 JS 对象，并解析依赖路径
漏掉 css-loader 会导致 @import "xxx.scss" 在浏览器里 404

开发环境用 `style-loader`，生产环境必须换 `MiniCssExtractPlugin.loader`

直接用 style-loader 会把 CSS 插入 <style></style> 标签，热更新快但无法缓存；生产环境必须抽离为独立 .css 文件，否则样式无法并行加载、也不利于 CDN 缓存。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

开发配置片段：{ loader: "style-loader" } 放在 use 数组最前面
生产配置必须引入 MiniCssExtractPlugin，并用它的 loader 替代 style-loader
忘记在 plugins 里 new 实例，会报错 Module build failed: Error: You must provide a 'filename' option

`sass-loader` 的 `sourceMap` 和 `additionalData` 常被忽略

调试 SCSS 时没有 source map，就只能看到编译后 CSS 行号；而全局变量（如自定义 Bootstrap 变量）若靠每个文件 @import 前重复声明，极易出错。

启用 source map：{ loader: "sass-loader", options: { sourceMap: true } }
注入全局变量（避免重复写 @import）：additionalData: '@import "./src/styles/variables.scss";'
注意：additionalData 是字符串，不是路径；若含引号需转义
Webpack 5+ 中 includePaths 已被弃用，改用 sassOptions.includePaths

引入 Bootstrap SCSS 时的路径和顺序陷阱

直接 @import "bootstrap" 必然失败——官方包里没有 bootstrap.scss 入口文件，只有 bootstrap/scss/bootstrap.scss，且它依赖前置 partial（如 _functions.scss）。

正确写法：@import "~bootstrap/scss/bootstrap";（需 sass-loader 支持 ~ 别名）
或配置 sassOptions: { includePaths: ["node_modules"] }，再写 @import "bootstrap/scss/bootstrap";
自定义变量（如 $primary）必须在首次 @import 任何 Bootstrap 文件前赋值，否则无效
_variables.scss 是 partial，不能单独编译，也不能直接 require() 加载