传统上我们会在html文件中引入CSS代码，借助webpack style-loader和css-loader我们可以在.js文件中引入css文件并让样式生效。
style-loader和css-loader作用是不同的。
css-loader: 加载.css文件style-loader:使用<style>将css-loader内部样式注入到我们的HTML页面
css-loader 和style-loader 的options选项
css-loader options
alias: 解析别名importLoader(@import)Minimize:true or false,是否开启css代码压缩，比如压缩空格不换行。- modules：是否开启css-modules
style-loader && style-loader options
style-loader分类
-
style-loader:配合css-loader使用，以<style></style>形式在html页面中插入css代码 -
style-loader/url： 以link标签形式向html页面中插入代码，采用这种方式需要将css-loader变为file-loader,但这种方式不推荐，因为如果在一个js文件中引入多个css文件会生成多个link标签，而html每个link标签都会发送一次网络请求，所以这种方式并不建议。 -
style-loader/useable: 采取这种方式使用处理
css，会有use( )和unuse（）l两种方法，use（）开启引入样式，unuse（)不适用样式。
options选项
-attrs: 添加自定义 attrs 到 style 标签
- insertAt:插入位置
- insertInto: 插入到指定dom
- singleton:类型为布尔值，多个样式是否只生成一个<style></style>标签。
transform:根据给定逻辑在css插入html前选择指定样式（具体可参考下面实例）
准备工作
新建文件夹并安装相应loader
当前文件夹下执行 npm init
执行 npm install style-loader css-loader --save-dev
执行npm install file-loader--save-dev(后面需要用到)
文件结构
demo 01：在js文件中引入css，查看打包后的效果。
1 /*webpack.config.js*/ 2 var path = require('path') 3 module.exports = { 4 entry: { 5 app: './app.js' 6 }, 7 output: { 8 path: path.resolve(__dirname, './dist'), 9 publicPath: './dist/', 10 filename: '[name].bundle.js', 11 chunkFilename: '[name].chunk.js' 12 }, 13 module: { 14 rules: [ 15 { 16 test: /.css$/, 17 use:[ 18 { 19 loader: 'style-loader' 20 }, 21 { 22 loader: 'css-loader' 23 } 24 ] 25 } 26 ] 27 } 28 }
app.js
/*app.js*/ import base from './src/css/base.css'
base.css
/*base.css*/ html { background: #808080 }
这是一个最简单的例子，我们在入口文件app.js中引入base.css。配置文件中针对.css文件应用了css-loader,style-loader,注意这里loader的顺序不能颠倒，webpack是自下而上解析的，只有通过css-loader处理css后才能通过style-loader生成<style></style>标签。
将打包后的app.bundle.js文件引入html可以看到背景变为灰色，并且生成了的<style></style>标签插入到<head></head>中
在base.css中新增样式
1 ``` 2 /*base.css*/ 3 html { 4 background: #808080 5 } 6 7 p { /*新增*/ 8 font-size: 40px 9 } 10 ```
在common.css中增加样式并在app.js中导入import common.css from './src/css/common.css'
1 /*common.css*/ 2 html { 3 color: red 4 }
打包后可以看到引入的每个css文件都对应生成了一个<style></style>标签。
接下来我们将配置文件中的style-loader变成style-loader/url,这时css-loader需要替代为file-loader.打包后在控制台可以看到html中引入了两个<link></link> 标签。
demo 02: 使用style-loader/useable
使用style-loader/useable， 需配合css-loader(不是file-loader)。
common.css
1 // common.css 2 html { 3 background: red 4 }
base.css
1 // base.css 2 html { 3 background: #808080 4 }
app.js
1 import base from './src/css/base.css' 2 import common from './src/css/common.css' 3 4 let bgFlag = true 5 document.onclick = function toggleBgColor() { 6 if (bgFlag) { 7 base.use() 8 common.unuse() 9 } else { 10 common.use() 11 base.unuse() 12 } 13 bgFlag = !bgFlag 14 }
打包后，在浏览器中点击页面可以切换页面的背景颜色，使用style-loader/url配合css-loader也是生成<style></style>标签，但是如果使用file-loader也能打包，但是在style标签中引入的是打包后的css chunks，并不能生效。
初始页面
点击一次，bgFlag === true,base.css生效，背景色为灰色。
在点击一次 bgFlag === false, 应用common.css，背景色为红色。
将css-loader变为file-loader,可以发现点击页面可以标签里的打包后的css chunks，但是这样是无法生效的。
demo 03 使用options选项。
-
attrs:attrs是一个对象，以键值对出现，在<style></style>标签中以key=value出现，键值对可以自定义，但是使用时建议语义化。
1 //style-loader添加options选项 2 { 3 loader: 'style-laoder', 4 options: { 5 attrs: { //attrs是一个对象，以键值对出现，建议语义化 6 first: '1' 7 } 8 } 9 }
可以看到base.css和common.css对应的两个<style></style> 标签都被添加了first = "1"
接下来我们给style-loader的options增加singleton属性,IE9对页面上style标签数量有严格限制，所以这个属性还是很有用的。
1 // webpack.config.js 2 use:[ 3 { 4 loader: 'style-loader', 5 options: { 6 attrs: { 7 first: 1 8 }, 9 singleton: true 10 } 11 }, 12 { 13 loader: 'css-loader' 14 15 } 16 ]
可以看到，此时只有一个标签插入到文档中。common.css和base.css模块的样式被合并到一个样式标签中。
上面提到options选项还有insertAt属性，insertAt有两个值top | bottom,如果不配置insertAt则 默认为bottom，当insertAt： ‘top’ 时 ，loader打包的css将优先已经存在的css，insertInto插入到指定标签。
在html页面中添加新的样式
1 <head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 5 <title>demo 01</title> 6 <style> 7 html { //背景色设置为红色 8 background: red 9 } 10 </style> 11 </head>
然后insertAt: ‘top’打包后可以发现webpack打包加载生成的标签会在标签的上方。背景色会被覆盖为红色。 
在html中新建<div id="app"></div> 标签，利用insertInto将打包的css插入到该div中。
demo 04 options中的transform
1 options: { 2 transform: './src/transform.js' //值对应一个js文件 3 }
transform.js中导入一个函数，函数的参数是css，这时我们拿到的css样式是以字符串的形式，所以可用repalce方法修改样式，transform.js可以通过style-loader会根据需要在css未加载到页面之前修改样式，在函数中我们可以获取到浏览器的相关信息，比如window,navigator等，这有助于我们根据相关信息修改样式。在这个例子中，我们判断window的innerWidth当小于476px时，将字体由24px变为12px。当浏览器宽大于476px时加载进来的css 文本大小为24px。
1 // transform.js 2 module.exports = function(css) { 3 console.log(css) 4 console.log(window.innerWidth) 5 6 if (window.innerWidth < 476) { 7 return css.replace('24', '12') 8 } 9 return css 10 }
css-loader options
less和sass
1 npm install less-loader less --save-dev 2 npm install sass-loader node-sass --save-dev
提取css
1 extract-loader 2 ExtractTextWebpackPlugin