Webpack 样式加载器 vs css-loader [英] Webpack style-loader vs css-loader

问题描述

我有两个问题.

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

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

解决方案

CSS 加载器接收一个 CSS 文件并返回带有通过 webpack 的 require 功能解析的 imports 和 url(...) 的 CSS:

<块引用>

var css = require("css!./file.css");//=>从 file.css 返回 css 代码，解析导入和 url(...)

它实际上不会对返回的 CSS 做任何事情.

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

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

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

到

1. 使用 Less 加载器将 file.less 转换为纯 CSS
2. 使用 CSS 加载器解析 CSS 中的所有 imports 和 url(...)
3. 使用样式加载器将这些样式插入页面

I have two questions.

1) CSS Loader and Style Loader are two webpack loaders. I couldn't grasp the difference between the two. Why do I have to use two loaders when they both do the same job?

2) What is this .useable.less and .useable.css mentioned in the above Readme.md files?

解决方案

The CSS loader takes a CSS file and returns the CSS with imports and url(...) resolved via webpack's require functionality:

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

It doesn't actually do anything with the returned CSS.

The style loader takes CSS and actually inserts it into the page so that the styles are active on the page.

They perform different operations, but it's often useful to chain them together, like Unix pipes. For example, if you were using the Less CSS preprocessor, you could use

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

to

1. Turn file.less into plain CSS with the Less loader
2. Resolve all the imports and url(...)s in the CSS with the CSS loader
3. Insert those styles into the page with the style loader

这篇关于Webpack 样式加载器 vs css-loader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！