Css Loader vs Style Loader与Sass-Loader

Question

在使用import语句时，我很难区分sass-loader和css-loader。根据我的知识，css loader解析导入语句（@import），而style-loader适用于在页面上动态注入样式。我也在我的应用程序中使用sass-loader。所以我对sass-loader功能感到困惑。它是否也解析了import语句以及将sass转换为css。在这种情况下，如果我在项目中只使用sass文件，那么我不需要css-loader，因为该工作将由sass-loader完成。我在这儿吗？有谁可以请高亮一点。 任何帮助将不胜感激

Answer 1

sass-loader将解析@import语句并在生成的CSS中包含导入的Sass，因此生成的CSS可能没有任何import语句。但css-loader不只是处理进口。你提到的三个装载机做了很多不同的事情，它们是一起使用的，虽然你可以使用其他的装载机，这样可以得到类似的结果。

1. sass-loader - 将Sass转换为CSS。 （输入：Sass，输出：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模块或缩小）。