285

我有两个问题。

1) CSS Loader和Style Loader是两个 webpack 加载器。我无法理解两者之间的区别。当它们都做同样的工作时，为什么我必须使用两个装载机？

2）上述Readme.md文件中提到的这个.useable.less和.useable.css是什么？

4

5 回答 5

319

CSS 加载器接受一个 CSS 文件并返回 CSSimports并url(...)通过 webpack 的require功能解析：

var css = require("css!./file.css");
// => returns css code from file.css, resolves imports and url(...)

它实际上并没有对返回的 CSS做任何事情。

样式加载器采用 CSS 并将其实际插入到页面中，以便样式在页面上处于活动状态。

它们执行不同的操作，但将它们链接在一起通常很有用，就像 Unix 管道一样。例如，如果您使用的是 Less CSS 预处理器，您可以使用

require("style!css!less!./file.less")

至

  1. 使用Lessfile.less加载器变成纯 CSS
  2. 使用 CSS loader解析 CSS 中的所有imports和url(...)
  3. 使用样式加载器将这些样式插入页面
于 2015-12-12T07:39:16.937 回答
80

css-loader以字符串形式读入 css 文件。raw-loader您可以在很多情况下替换它并获得相同的效果。由于它只是读取文件内容而没有其他内容，因此除非您将其与另一个加载器链接，否则它基本上是无用的。

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

如果你在bundle.js使用后查看里面的 javascript，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>消失了。

于 2017-02-18T06:36:50.247 回答
14

为了回答第二个问题“上面的Readme.md文件中提到的.useable.less和.useable.css是什么？”，默认情况下，当样式为 时require'd，样式加载器模块会自动将<script>标签注入到DOM中，并且该标签会一直保留在 DOM 中，直到浏览器窗口关闭或重新加载。样式加载器模块还提供了一个所谓的“引用计数 API”，允许开发人员添加样式并在以后不再需要时删除它们。API 的工作方式如下：

const style = require('style/loader!css!./style.css')
// The "reference counter" for this style starts at 0
// The style has not yet been injected into the DOM
style.use()  // increments counter to 1, injects a <style> tag
style.use()  // increments counter to 2
style.unuse()  // decrements counter to 1
style.unuse()  // decrements counter to 0, removes the <style> tag

按照惯例，使用此 API 加载的样式表具有扩展名“.usable.css”，而不是上面的简单“.css”。

于 2016-10-12T18:22:12.910 回答
5

让我从你的问题中回答 1）。style-loader和 和有什么不一样css-loader？或者：他们做什么？

  • Javascript 中有不同的不兼容模块导入机制
  • webpack 允许、重写和扩展所有众所周知的模块导入机制
  • 通常只能导入 Javascript
  • 使用 loader，webpack 还允许导入其他文件
    • 如果您开始使用该功能，那么没有 webpack 就无法再未经修改地使用 Javascript
  • 装载机决定
    • 如果附加文件出现在输出目录中（通常不会）
    • “返回”什么</li>
  • loader 可以被链接
  • 最后一个加载器的输出将包含在包中
  • 最后一个loader需要返回Javascript，否则捆绑的Javascript会出错
  • 以 结尾的导入css-loader将在 Javascript 中接收一个数组
    • 我找不到您将收到的适当文件
    • 该数组似乎为每个处理的 CSS 文件包含一个元素（例如使用 CSS@import规则），将文件名和文件内容（修改）作为字符串
    • 没有额外的文件最终会出现在输出目录中
    • 如果你css-loader单独使用，那么你必须自己对字符串做一些事情，否则它们只会增加你的包大小
  • style-loader将从css-loader更多的 Javascript 中包装 Javascript
    • 它不能也不会读取 CSS 文件
    • 包装<style>使用 CSS 字符串创建元素css-loader并将它们注入 DOM
    • style-loader不能单独使用（你会得到一个错误），因为它不读取文件并且期望css-loader-like Javascript 作为输入
于 2021-02-15T21:06:05.710 回答
-1

Webpack 文档建议将 style-loader 与 css-loader 结合使用：

https://webpack.js.org/loaders/style-loader/

于 2019-11-04T19:11:18.800 回答