加载css需要用到css-loader和style-loader css-loader将@import 和 url 处理成正规的ES6 import ,如果@import指向的是一个外部资源，css-loader会跳过，而只会对内部资源做处理。css-loader处理之后，style-loader会将输出的css注入到打包文件中。css默认是inline模式，且实现了HMR接口。但inline不太适用于生产环境(全部输出在页面上)。还需要用extracttextplugin生成一个单独的css文件，但先一步一步来。
一，样式打包
1.安装css-loader，style-loader
npm install css-loader style-loader --save-dev
2.修改webpack.config.js增加一个一级子节点
module:{ rules:[{ test:/\.css$/, use: ['style-loader', 'css-loader'], }] },
test的正则会匹配.css的文件。use中的执行顺序是从右到左。loader的执行是连续的，就像管道一样，先到css-loader再到style-loader。loaders: ['style-loader', 'css-loader'] 可以理解为：styleloader(cssloader(input)) 。
3.添加样式
app/mian.css
body { background: cornsilk; }
然后在index.js中引入
import './main.css';
再运行npm start,在:8080/中打开
这时候页面出现了背景色，而且发现样式写入了header中，这个时候你改变颜色，界面也会无刷新的更新，这正是上一节HMR的效果。
样式也是通过webpackHotUpdate方法进行更新。
二、加载less
再看一下如何加载less，先安装less-loader
npm install less less-loader --save-dev
再修改配置文件：
module:{ rules:[{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'], }] },
然后建立一个less文件。less.less
@base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { -webkit-box-shadow: @style @c; box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } } body { background: cornsilk; }
修改index.js
import './less.less'; import component from './component'; var ele=document.createElement("div"); ele.innerHTML="this is an box"; ele.className="box"; document.body.appendChild(ele); let demoComponent=component(); document.body.appendChild(demoComponent);
得到效果：
可以看见编译成功，要注意的是，再使用less的时候import只能是less文件，这个时候再import main.css会报错。这一节对less就做一个简单的演示，其他样式预处理器同理，下面的内容还是继续基于css。
三、理解css作用域和css 模块
一般来说css的作用域都是全局的，我们常在母版页里面添加了多个样式文件，后面的样式文件会覆盖前面的样式文件，常常给我们的调试带来麻烦。而CSS Modules通过import引入了本地作用域。这样能够避免命名空间冲突。webpack的css-loader是支持CSS Modules的，怎么理解呢，先看几个例子。我们先在配置中开启(先关掉HMR)：
module:{ rules:[{ test:/\.css$/, use: ['style-loader', { loader: 'css-loader', options: { modules: true,//让css-loader支持Css Modules。 }, },],
然后定义一个新的样式(main.css)：
body { background: cornsilk; } .redButton { background: red;color:yellow; }
给component加一个样式，先引入main.css。
import styles from './main.css'; export default function () { var element = document.createElement('h1'); element.className=styles.redButton; element.innerHTML = 'Hello webpack'; return element; }
这个时候我们看到界面已经变化了。
再看右边生成的样式，我们的样式名称已经发生了改变。回顾整个过程相当于main.css中的每一个类名成了一个模块，在js中可以像获取模块一样的获取。但是你可能想，为毛我不能直接给元素赋值，干嘛要import呢。这是个好问题，我们再新增一个样式
不同样式文件的同名类
other.css
.redButton { background:rebeccapurple;color:snow; }
它也有一个.redbutton的类(但效果是紫色的)，然后在index.js中创建一个div元素并给它添加redbutton样式。