现在我们正式学习关于引入具体模块类型的loder处理器。

首先我们之前提到过webpack是只认识js模块的，那怎么认识样式相关的模块文件呢？很简单，当通过require（‘xx.css’）或者import aa from xx.css时候,再通过css-loader来解析css文件代码。记住，这个css-loader是只解析。

1，先使用下列命令：

npm install --save-dev css-loader

2，老规矩在对webpack.config.js文件进行配置。配置截图如下

示例图

从示例图中可以看出，主要在module配置中了一个rules规则，然后抛开之前我讲的test，uset，type属性，我们可以看看特意看看use数组中的每一项对象。里面每一项对象都包含有loader处理器映射的名称。也可以包含options选线，选项里面的情况具体可以点击这里。

是不是这样处理完，就可以完全使用css了呢？答案并不是，不信你可以打包运行下。我们方才提到css-loader只是做了解析，即是预处理的功能，但是并没有把解析下来的css代码挂载到html页面中。这个时候我们的style-loader就用到了，他就是处理这个功能。

使用情况如下：

1，npm install style-loader --save-dev

然后配置如上截图所示。但是注意下，写入配置中，loader的书序格外要小心，不能搞错了，必须是css-loader放到后面中，因为解析这一块时候是从右向左执行代码的，意思是必须是从右边或者后边的css-loader先解析，即是先解析成css代码才行，然后用style-loader挂载到html页面。

对于less-loader处理器，使用 npm install --save-dev less-loader less

这个句子后面还安装了一个less处理器，主要是浏览器不能识别less代码，所以必须要安装。使用情况也如上截图所示。

ok。关于样式的配置大致如此。