Sass-loader 中缩进语法配置变更的技术解析

背景介绍

在 webpack 生态中，sass-loader 是一个重要的 CSS 预处理器加载器，它允许开发者在项目中直接使用 Sass/SCSS 语法。近期，sass-loader 在 v16.0.0 版本中引入了一个重要的配置变更，影响了使用缩进语法（Indented Syntax）的用户。

配置变更详情

在旧版本中，开发者可以通过在 sassOptions 中设置 indentedSyntax: true 来启用 Sass 的缩进语法（也称为 Sass 语法）。这种语法使用缩进而非花括号来嵌套规则，文件扩展名通常为 .sass。

然而，从 v16.0.0 版本开始，这个配置方式已被弃用，取而代之的是更标准的 syntax: "indented" 配置项。这一变更意味着：

1. 旧配置方式 sassOptions: { indentedSyntax: true } 将不再生效
2. 新配置方式应改为 sassOptions: { syntax: "indented" }

影响范围

这一变更特别影响了以下使用场景：

1. 直接配置 sass-loader 的项目
2. 使用 vue-loader 的项目中，通过 <style lang="sass"> 标签嵌入的 Sass 代码
   • 因为文件扩展名自动检测机制不适用于嵌入式样式标签
   • 需要显式配置语法选项

升级建议

对于正在升级到 sass-loader v16+ 的用户，建议采取以下步骤：

1. 检查项目中是否使用了缩进语法
2. 更新 webpack 配置中的 sassOptions
3. 对于 Vue 项目，确保为嵌入式 Sass 样式正确配置语法选项

技术背景

这一变更实际上是对底层 Dart Sass 实现更准确的对接。Dart Sass 本身使用 syntax 选项而非 indentedSyntax 来指定语法类型，sass-loader 的这一变更使其与底层实现保持一致，提高了配置的标准化程度。

最佳实践

对于需要同时支持 .scss 和 .sass 文件的项目，可以考虑以下配置策略：

1. 为不同扩展名的文件配置不同的加载器规则
2. 对于 .sass 文件，显式设置 syntax: "indented"
3. 对于 .scss 文件，可以省略语法配置或使用默认值

这一变更虽然带来了短期的配置调整需求，但从长远来看，它使配置更加标准化，减少了与底层实现的差异，有利于项目的维护和升级。