Webpack样式加载器vs css加载器

我有两个问题。

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

2)这是什么?less和.useable.css在上面的自述文中提到。md文件?

当前回答

要回答第二个问题“这是什么。有用的。”less和.useable.css在上面的自述文中提到。md文件?"，默认情况下，当需要一个样式时，样式加载器模块会自动在DOM中注入一个<script>标记，并且这个标记一直保留在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-12 18:22:12

其他回答

让我来回答你的问题。样式加载器和css加载器的区别是什么?或者:他们是做什么的?

there are different incompatible module import mechanisms in Javascript webpack allows, rewrites and extends all well known module import mechanisms normally only Javascript can be imported with loaders, webpack also allows other files to be imported if you start using that feature, that Javascript can not be used unmodified without webpack any more the loader decides if additional files appear in the output directory (usually not) what to “return” loaders can be chained the output of the last loader will be included in the bundle the last loader needs to return Javascript, otherwise the bundled Javascript will be faulty imports which end with the css-loader will receive an array in Javascript I could not find proper documentation what you will receive the array seems to contain one element for each CSS file processed (e.g. with CSS @import rules), having the file name and file content (modified) as strings no extra files will end up in the output directory if you use the css-loader alone, then you have to do something with the strings yourself or they just increase your bundle size for nothing style-loader will wrap Javascript from css-loader in more Javascript it can not and does not read CSS files the wrapping creates <style> elements with the CSS strings from css-loader and injects them in the DOM style-loader can not be used alone (you get an error), because it doesn’t read files and expects css-loader-like Javascript as input

2021-02-15 21:06:05

Webpack文档建议将style-loader和css-loader结合使用:

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

2019-11-04 19:11:18

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-12 18:22:12

CSS加载器接受一个CSS文件，并通过webpack的require功能返回导入和url(…)解析的CSS文件:

Var CSS = require(" CSS !./file.css"); // =>返回file.css中的CSS代码，解析导入和url(…)

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

样式加载器接收CSS并实际将其插入到页面中，以便样式在页面上是活动的。

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

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

把文件。使用less加载器将less转换为普通CSS 使用CSS加载器解析CSS中的所有导入和url(… 使用样式加载器将这些样式插入到页面中

2015-12-12 07:39:16

CSS加载器读取CSS文件作为一个字符串。你可以用原始加载器替换它，在很多情况下得到同样的效果。因为它只是读取文件内容，没有其他内容，所以它基本上是无用的，除非你将它与另一个加载器链接。

样式加载器获取这些样式，并在包含这些样式的页面<head>元素中创建一个<style>标记。

如果你在使用style-loader后查看bundle.js中的javascript，你会在生成的代码中看到一个注释，上面写着

// 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>

这个例子来自本教程。如果通过更改行从管道中删除样式加载器

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

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

您将看到<style>消失了。

2017-02-18 06:36:50

Webpack样式加载器vs css加载器

推荐文章

最新文章

标签