Webpack style-loader和css-loader对比?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (324)

我有两个问题。

1)css loader和style loader是两个网络包加载器。我无法理解两者之间的区别。为什么我要用两个装载机,而他们都做同样的工作?

2)上面的Readme.md文件中提到的.useable.less和.useable.css是什么?

提问于
用户回答回答于

CSS loader接受一个CSS文件,并返回带有importsurl(...)通过WebPack的解析require功能的CSS:

var CSS=Required(“css!/file.css”);//=>从file.css返回CSS代码,解析导入和url(...)

其实并不是返回CSS的任何内容。

style loader接受CSS并将其插入到页面中,以便样式在页面上处于活动状态。

它们执行不同的操作,但是将它们链接在一起通常很有用,就像Unix管道一样。例如,如果你正在使用 the Less CSS preprocessor,你可以用

require("style!css!less!./file.less")
  1. 使用the Less loader把file.less转化为普通CSS
  2. 解决在带有css加载器的css中所有importurl(...)
  3. 使用the style loader将这些样式插入页面
用户回答回答于

css-loader以字符串形式读取CSS文件。你可以用raw-loader在很多情况下都会产生同样的效果。因为它只读取文件内容而没有其他内容,所以它基本上是无用的,除非你用另一个加载程序将它链接起来。

style-loader获取这些样式并创建<style>页中的标记<head>包含这些样式的元素。

如果你看一下里面的javascript bundle.js使用后style-loader你将在生成的代码中看到一个注释:

//Style-Loader:通过添加标记向DOM添加一些CSS

例如,

<html>
    <head>
        <!-- this tag was created by style-loader -->
        <style type="text/css">
            body {
                background: yellow;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

如果通过改变管线从管道中移出删除style-loader

require("!style-loader!css-loader!./style.css");

变为

require("css-loader!./style.css");

你会发现<style>没有了。

扫码关注云+社区