webpack - Css Loader vs Style Loader vs Sass-Loader

Question

在使用 import 语句时，我对区分 sass-loader 和 css-loader 有点困惑。据我所知，css loader resolve import statment(@import) 和 style-loader 可以在你的页面上动态注入样式。我也在我的应用程序中使用 sass-loader。所以我对 sass-loader 功能感到困惑。它是否还解决了 import 语句以及将 sass 转换为 css 的问题。在这种情况下，如果我在项目中仅使用 sass 文件，则不需要 css-loader，因为该工作将由 sass-loader 完成。我在吗？任何人都可以强调这一点。任何帮助将非常感激

Answer 1

将sass-loader解析@import语句并将导入的 Sass 包含在生成的 CSS 中，因此生成的 CSS 可能没有任何导入语句。但css-loader不只是处理进口。您提到的三个加载器做的事情非常不同，它们应该一起使用，尽管您可以使用其他加载器，这会产生类似的结果。

1. sass-loader- 将 Sass 转换为 CSS。（输入：萨斯，输出：CSS）
2. css-loader- 将 CSS 转换为 JavaScript 模块。（输入：CSS，输出：JavaScript）
3. style-loader- 在运行时将 JavaScript 模块导出的 CSS 注入到<style>标签中。（输入：JavaScript，输出：JavaScript）。

注意： 的输出style-loader仅在您使用 CSS 模块时才相关，该模块传递将类名映射到本地标识符的对象。

如果没有任何将 CSS 转换为 JavaScript 的加载器，您将无法使用sass-loader，但您可能会使用raw-loader，它只是将模块的内容作为字符串读取，但随后您可能会丢失一些转换css-loader（例如 CSS 模块或缩小） .