Webpack 样式加载器与 css-loader

Question

我有两个问题。

1) CSS Loader和 Style Loader是两个 webpack 加载器。我无法理解两者之间的区别。当两个加载器执行相同的工作时，为什么我必须使用两个加载器？

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

Answer 1

CSS 加载器获取 CSS 文件，并通过 webpack 的 require 功能解析 imports 和 url(...) 返回 CSS:

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

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

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

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

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

至

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