webpack的样式加载器
通过注入<style>标签将CSS添加到DOM中
安装
npm install style-loader --save-dev
用法
简单API
require("style-loader!raw-loader!./file.css");
// => 在file.css文件中添加规则
建议将它与css-loader结合使用: require(“style-loader!css-loader!./file.css”).
也可以添加URL而不是CSS字符串：
require("style-loader/url!file-loader!./file.css");
// => 把<link rel=“stylesheet” >这一行添加到文档file.css中
本地作用域的CSS
(实验)
当使用本地作用域的CSS时，模块导出生成的标识符：
var style = require("style-loader!css-loader!./file.css");
style.placeholder1 === "z849f98ca812bc0d099a43e0f90184"
引用计数API
var style = require("style-loader/useable!css-loader!./file.css");
style.use(); // = style.ref();
style.unuse(); // = style.unref();
样式不会在require上添加，而是在调用use/ref时添加样式。如果unuse/unref的调用次数与use/ref一样，样式则会从页面中删除
注意：当unuse/unref被调用次数多时，行为是未定义的。所以不要这样做。
选项
insertAt
默认情况下，样式加载器将<style>元素附加到页面的<head>标记的末尾。这将导致由加载器创建的CSS优先于文档头中已经存在的CSS。要在头部的开头插入样式元素，请将此查询参数设置为“top”，例如。require(‘../style.css?insertAt=top’).
singleton
如果已定义，则style-loader将重用单个 <style> 元素，而不是为每个所需的模块添加/删除单个元素。注意：默认情况下，IE9中启用此选项，这对页面上允许的样式标记数有严格的限制。您可以使用singleton查询参数启用或禁用它(?singleton or ?-singleton)。
推荐配置
按照惯例，引用计数的API应绑定到.useable.css，而简单的API绑定到.css（其他文件类型也类似，即.useable.less和.less）
所以推荐的webpack配置是
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
],
},
{
test: /\.useable\.css$/,
use: [
{
loader: "style-loader",
options: {
useable: true
},
},
{ loader: "css-loader" },
],
},
],
},
}
关于source map支持和资源方面，引用URL应注意：当样式加载器与？sourceMap选项一起使用时，CSS模块将生成为Blobs，因此相对路径无法辨别（它们将是相对于chrome:blob或chrome:devtools）。为了使资源保持正确的路径，必须设置webpack配置的output.publicPath属性，以便生成绝对路径。
License
MIT (http://www.opensource.org/licenses/mit-license.php)
原文：https://webpack.js.org/loaders/style-loader/
上一篇: source-map-loader 下一篇: transform-loader