STYLE-LOADER详细使用说明
前注：
文档全文请查看 根目录的文档说明。
如果可以，请给本项目加【Star】和【Fork】持续关注。
有疑义请点击这里，发【Issues】。
DEMO地址
1、概述
简单来说，style-loader是将css-loader打包好的css代码以<style>标签的形式插入到html文件中。
对于简单项目，打包然后插入也就足够了，但是遇见复杂情况，例如：
- 需要使用webpack的服务器热加载服务进行特殊配置；
- 对css文件二次处理（更改类名，添加额外css属性之类）；
- 合并
<style>标签（默认是不合并的）； - 启用sourceMap等（虽然实际根本无效嘛）；
- 路径转换（相对路径转为绝对路径）；
- 给
<style>标签添加自定义属性； - 手动挂载、移除
<style>标签等；
显然就不行了。
所以需要通过配置来进行设置。
2、配置
有几个属性需要和其他东西（比如某些loader）配合，才能生效。
所以先介绍功能明确的几个，再简述很难直接应用的几个。
2.0、普通
导入方式有两种
- 直接
import 'foo.css'； - es6语法
import foo from 'foo.css';
前者没啥好说的。
当使用后者导入时，有一些特殊特性：
- 在使用局部作用域时（
css-loader的modules属性的应用），会有生成的（局部）标识符(identifier)。，可以通过foo.className来获取 - 当使用
useable特性时，可以通过foo.use()以及foo.unuse()来让css生效/失效； -
url特性尝试失败。
2.1、attrs
| 名称 | 类型 | 默认值 | 描述 |
| attrs | {Object} | {} | 添加自定义 attrs 到 style 标签 |
attrs 属性最好理解。
-
attrs的值是一个对象； - 对象 key , val 成对出现的；
- 插入形式是以
key=val的形式插入； - 但例如
[name]或者[hash]之类的，无效；
例如：
{
loader: 'style-loader',
options: {
attrs: {
id: 'foo'
}
}
}插入到html后，style标签变为如下形式：<style id="foo" type="text/css">css代码略</style>。
但是缺点是不能变为哈希值，所以如果想要实现css的局部作用域，还需要其他东西配合（这里略略略）。
2.2、transform
| 名称 | 类型 | 默认值 | 描述 |
| transform | {Function} | false | 转换/条件加载 CSS，通过传递转换/条件函数 |
简单来说，这个是拿到以字符串的形式拿到css文件，然后将这个字符串以参数的形式传给处理函数，函数处理完后返回，返回值即实际插入style标签的内容。
使用方法：
1、配置 style-loader 的属性如下：
{
loader: 'style-loader',
options: {
transform: 'transform.js' // 可以使用相对路径，这里表示跟 webpack.config.js 同目录
}
}2、在webpack.config.js的同一个目录下创建文件：transform.js（即上面写的那个路径）
3、在transform.js文件内，粘贴如下代码(CommonJS模块形式）：
// 这里只有一个参数，即css字符串
module.exports = function (css) {
console.log(css)
const transformed = css.replace(/}/g, 'box-sizing: border-box;\n}')
return transformed
}这段代码的作用，相当于给每个css样式里，添加了一个box-sizing: border-box;属性。
例如css文件如下：
// foo.css 转换前
#app {
position: relative;
}转换完后的结果变为：
// foo.css 转换后
#app {
position: relative;
box-sizing: border-box;
}box-sizing:前面没有空格，是因为转换函数里，replace第二个参数的box-sizing:前没有空格。
4、每个css文件都会执行一次这段代码。css字符串，不包含@import导入的css文件相关的几行代码；
5、重要：这段代码执行的时间不在打包的时候，而是在插入到html文件中的时候。
这意味着你可以取得一些根据当前浏览器环境设置的值。例如通过document.body.clientWidth拿到浏览器宽度，然后动态计算一些css属性是否插入到页面中（响应式）.
应用：
当以字符串形式拿到css代码的时候，我们可以做很多事情。我举几个例子：
1、判断当前浏览器环境，当需要额外兼容代码的时候，给css属性添加兼容性代码。
例如遇见box-sizing，添加-webkit-box-sizing:和-moz-box-sizing:。
2、可以进行风格设置。
例如同时存在亮色和暗色风格，用户使用的风格在设置后存在cookies或者localStorage，那么写两套代码显然是比较麻烦的。
就可以引入一个颜色映射表（暗色的值->亮色的值），默认使用暗色的值。
当检查到用户使用亮色风格时（读取cookies或者localStorage），通过颜色映射表，利用 replace 函数，将颜色值替换为亮色的。
2.3、insertAt和insertInto
| 名称 | 类型 | 默认值 | 描述 |
| insertAt | {String|Object} | bottom | 在给定位置处插入style标签 |
| insertInto | {String} | 给定位置中插入style标签 |
简单来说，insertAt 和 insertInto 共通决定style标签插入哪里。
两种情况：
-
insertAt值为string类型。可以是top或者bottom，表示插入某个标签 内 的顶部或者结尾，和该标签是父子关系； -
insertAt值为object类型。key只能是before（见node_modules/style-loader/lib/addStyles.js第173行），表示插入到某个标签之前（和该标签是兄弟关系），例如以下：
insertAt: {
before: '#app'
},
insertInto: 'body'以上代码表示，先在<body> 标签能找到<div id='app'></div>这个标签，然后插入到这个标签之前；
假如找不到符合要求的标签，则默认插入到 <head></head> 标签的末尾。
整个插入逻辑如下：
- 假如
insertAt是值是top或者bottom，那么style标签将插入到insertInto所指向的DOM（通过document.querySelector(target)获取）的开头或末尾（style标签为指向DOM的子元素）； - 假如
insertAt的值是对象，那么则插入insertInto的子元素的insertAt.before所指向的DOM之前（即document.querySelector("insertInto insertAt.before")指向的DOM）。
注意，两个属性的标签选择器，都是通过 document.querySelector 实现的，所以存在两个问题：
- 属性的值，需要符合
document.querySelector的语法； - 低版本浏览器（比如IE）可能不支持这个选择器API；
2.4、sourceMap和convertToAbsoluteUrls
| 名称 | 类型 | 默认值 | 描述 |
| sourceMap | {Boolean} | false | 启用/禁用 Sourcemap |
| convertToAbsoluteUrls | {Boolean} | false | 启用 source map 后，将相对 URL 转换为绝对 URL |
首先，sourceMap 实测和翻源代码后，感觉没有生效。
在跟了一遍代码后，推测原因在于，sourceMap的取值，取的是 css-laoder 的sourceMap的值。
准确的说，在webpack里，css文件被视为一个模块，因此import引入的css文件，也是一个模块对象。而在判断的时候，取的是这个模块（是一个object）的属性sourceMap的值，而不是 options.sourceMap 的值。
我已经提了issues给官方了。
而这个模块的值，推测是被css-loader的sourceMap属性赋值的（我没有去跟源代码，但测试后推断就是这样的）。
其次，从相对路径转为绝对路径，是在前端通过js代码转换的。
第三，convertToAbsoluteUrls 的效果如官方描述一样，具体下面举例。
几种情况如下（截止style-loader版本0.19.0）：
- 当
convertToAbsoluteUrls值为false时，依然使用相对路径，即例如./foo.png； - 当
css-loader的sourceMap的值为true，且convertToAbsoluteUrls值为true时，更改为绝对路径，即例如http://127.0.0.1:8080/foo.png； - 可能是bug，所以目前不受
style-loader的sourceMap属性的影响；
bug的demo如链接
2.5、useable
作用
让所有引入的css文件，变为手动加载；
使用方法
loader: 'style-loader/useable'
说明：
- 当使用这个特性时，
transform属性失效（打包正常，但挂载的时候表示会报错） - 示例代码如下，效果解释：
- 用一个变量标记当前是否挂载，点击后进行判断；
- 如果挂载了，通过
style.unref()从DOM树中移出（这些样式会失效）； - 如果没有挂载，那么通过
style.ref()插入到DOM树中进行挂载（样式生效）
代码：
// app.js
import style from './style/style.css'
/* useable（开始） */
let isUse = false
// 这是一个按钮的点击事件
document.querySelector('#test').onclick = function () {
if (isUse) {
style.unref()
} else {
style.ref()
}
isUse = !isUse
}
/* useable（结束） */2.6、singleton
作用
使用一个的 <style> 标签加载所有css属性，或者是每个css模块一个 <style> 标签。
默认值是false（每个css模块一个 <style> 标签）；
使用方法
{
loader: 'style-loader',
options: {
singleton: true
}
}说明：
- 默认情况下，我们会发现，每一个css文件会变为一个
<style>标签，因此实际加载中，可能有多个<style>标签； - 默认值为
false（而不是原文中说的默认情况下启用此选项） - 当该值设置为
true时，那么，原本多个<style>标签会被合并成一个<style>标签。
注：
官方文档上写的是默认开启，实际上是不开启的（v0.19.0）。我已经提了issues
2.7、hmr
| 名称 | 类型 | 默认值 | 描述 |
| hmr | {Boolean} | true | Enable/disable Hot Module Replacement (HMR), if disabled no HMR Code will be added (good for non local development/production) |
谷歌翻译为中文：
启用/禁用热模块更换（HMR），如果禁用，则不会添加HMR代码。 这可以用于非本地开发和生产。
大概就是指默认为true时，允许热加载（就是你改了代码后，不需要刷新页面，立刻更新数据），我没实际测试过，不过应该没人会把这个设置为false吧？
2.8、base
| 名称 | 类型 | 默认值 | 描述 |
| base | {Number} | true | 设置模块 ID 基础 (DLLPlugin) |
当使用一个或多个 DllPlugin 时，此设置主要用作 css 冲突 的修补方案。base 可以防止 app 的 css（或 DllPlugin2 的 css）覆盖 DllPlugin1 的 css，方法是指定一个 css 模块的 id 大于 DllPlugin1 的范围，例如：
等我搞清楚 DllPlugin 是什么再说吧，略略略。
