sass - 带有 webpack 的 SCSS 加载器

Question

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

score 8 · Accepted Answer

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

直接从谷歌上的第一个结果进行这样的搜索：

最常用的语法称为“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

1 回答 1