Css Loader vs Style Loader与Sass-Loader

Question

Css Loader vs Style Loader与Sass-Loader

Bha*_*ani 5 sass webpack sass-loader css-loader react-css-modules

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

Answer 1

Mic*_*ngo 16

在sass-loader将解决@import报表,包括进口萨斯在生成CSS,因此所产生的CSS可能不会有任何import语句.但这css-loader不只是处理进口.你提到的三个装载机做了非常不同的事情,它们是一起使用的,虽然你可以使用其他的装载机,这样可以得到类似的结果.

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

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

你不能在sass-loader没有任何加载器的情况下使用将CSS转换为JavaScript,但是你可能会使用它raw-loader,它只是将模块的内容作为字符串读入,但是你可能会失去一些转换css-loader(例如CSS模块或缩小) .

@nev.m `css-loader` 创建一个带有 CSS 的 JavaScript 字符串，`style-loader` 创建一个 `<style>` 标签（使用 [`document.createElement`](https://developer.mozilla.org /en-US/docs/Web/API/Document/createElement)) 将 CSS 字符串作为其内容并将其添加到 DOM。`style-loader` 的输出是纯 JavaScript，它创建 DOM 节点并在执行时插入它（因此*在运行时*）。`style-loader` 仅在您*不* 将 CSS 提取到单独的 `.css` 文件中时使用。 (2认同)

归档时间：	8 年，8 月前
查看次数：	1819 次
最近记录：	8 年，8 月前