sass - 带有 webpack 的 SCSS 加载器

Question

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

Answer 1

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

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

The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3's syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. The second, older syntax is known as the indented syntax (or just “.sass”).

至于它与 webpack 中的 sass-loader 的兼容性——最终，sass loader 调用了 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