在使用 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 完成。我在这里吗？任何人都可以强调这一点。 任何帮助将不胜感激
【问题讨论】：
标签： webpack sass css-loader sass-loader react-css-modules
sass-loader 将解析 @import 语句并将导入的 Sass 包含在生成的 CSS 中，因此生成的 CSS 可能没有任何导入语句。但css-loader 不仅仅处理进口。您提到的三个加载器做的事情非常不同，它们应该一起使用，尽管您可以使用其他加载器，这会产生类似的结果。
sass-loader - 将 Sass 转换为 CSS。 （输入：Sass，输出：CSS）css-loader - 将 CSS 转换为 JavaScript 模块。 （输入：CSS，输出：JavaScript）style-loader - 在运行时将 JavaScript 模块导出的 CSS 注入到 <style> 标记中。 （输入：JavaScript，输出：JavaScript）。注意：style-loader 的输出仅在您使用 CSS 模块时才相关，CSS 模块传递将类名映射到本地标识符的对象。
如果没有任何将 CSS 转换为 JavaScript 的加载器，您不能使用 sass-loader，但您可能会使用 raw-loader，它只是将模块的内容作为字符串读取，但是您可能会丢失一些转换css-loader 确实如此（例如 CSS 模块或缩小）。
【讨论】：
css-loader 创建一个带有 CSS 的 JavaScript 字符串，style-loader 创建一个带有 CSS 字符串作为其内容的 <style> 标记（使用 document.createElement）并将其添加到DOM。 style-loader 的输出是纯 JavaScript，它创建 DOM 节点并在执行时插入它（因此 在运行时）。 style-loader 仅在您不将 CSS 提取到单独的 .css 文件中时使用。