带有 webpack 的 SCSS 加载器答案

【问题标题】：SCSS loader with webpack带有 webpack 的 SCSS 加载器
【发布时间】：2016-01-23 10:55:09
【问题描述】：

如何使用 webpack 构建我的 .scss？我可以找到更少的加载器和 css 加载器，但找不到 scss。这和萨斯一样吗？我一直在引用 Sass，但语法不同

【问题讨论】：

【解决方案1】：

这更像是一个 SASS 语法与 SCSS 语法的问题。

直接从 google 上的第一个结果进行此类搜索：

最常用的语法称为“SCSS”（表示“Sassy CSS”），是 CSS3 语法的超集。这意味着每个有效的 CSS3 样式表也是有效的 SCSS。 SCSS 文件使用扩展名 .scss。第二种较旧的语法称为缩进语法（或简称为“.sass”）。

至于它与 webpack 中的 sass-loader 的兼容性——最终，sass 加载器调用 node-sass 库，该库本身是建立在 libsass 之上的。

这些工具支持这两种语法形式，因此您可以毫无问题地使用 sass-loader。

sass-loader 使用旧的 .sass 语法

如果您使用 .sass，您只需在使用 sass-loader 时在查询字符串上传递一个选项：

loaders: [
  {
    test: /\.sass$/,
    // Passing indentedSyntax query param to node-sass
    loaders: ["style", "css", "sass?indentedSyntax"]
  }
]

sass-loader 使用更常见的 .scss 语法

如果您使用的是 .scss，并且您已经正确配置了加载程序，那么一切都应该可以正常工作。

这里是 sass-loader 的链接供您参考：https://github.com/jtangelder/sass-loader

【讨论】：