Css Loader vs Style Loader Vs Sass-Loader

Question

在使用import语句时，我在区分sass加载程序和css-加载程序方面有点困惑。据我所知，css加载程序解析导入状态(@ import )，样式加载器在页面上动态地注入样式。我也在我的应用程序中使用sass-加载程序。所以我对sass-加载程序的功能感到困惑。它是否也解析导入语句以及将sass转换为css。在这种情况下，如果我只在我的项目中使用sass文件，我就不需要css加载器，因为该工作将由sass加载程序完成。我就在这儿吗？有人能强调一下这件事吗。任何帮助都将不胜感激。

Answer 1

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

1. sass-loader -将Sass转换为CSS。(输入: Sass，输出: CSS)
2. css-loader -将CSS转换为JavaScript模块。(输入: CSS，输出: JavaScript)
3. style-loader -在运行时将由JavaScript模块导出的CSS注入<style>标记。(输入: JavaScript，输出: JavaScript)。

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

如果没有任何将CSS转换为sass-loader的加载程序，您就不能使用raw-loader，但是您可以使用raw-loader，它只是将模块的内容读入字符串，但随后可能会丢失css-loader所做的一些转换(例如CSS模块或小型化)。