02-初识loader，使用loader加载css

hello大家好，本节主要讲解的内容是如何使用webpack加载css。

webpack 只能理解 JavaScript 和 JSON 文件。如果要使用webpack处理其他文件，应该怎么办呢？这个时候我们就需要使用loader将其他文件处理成webpack可以理解的文件，我打个比方，loader就像一个翻译官一样，将其他语言像是英语法语西班牙语俄罗斯语等等翻译成我们能听懂的汉语普通话。

那么下面呢，我先演示一下如何使用webpack来加载css文件，

首先，安装对应的loader：

1. css-loader
2. style-loade

执行命令行 npm install css-loader style-loader -D

等待一会安装完毕，安装完的时候，创建一个style.css文件写样式，

body{
    background-color:#369;
} 
.test{
    color:#963;
    font-size:40px;
}

然后在webpack.config.js内进行配置，告诉webpack遇到css文件应该用什么loader来翻译成它可以理解的东西，loader的配置在module:{rules:[]}中写，

test: /\\.css$/, use: [ 'style-loader', 'css-loader' ]

test对应的值，是一个字符串或正则表达式，现在这个代码的意思是匹配到以css结尾的文件，就是css文件，当匹配到这类文件之后，使用style-loader和css-loader来处理，loader的执行顺序是从上到下的，当webpack遇到css文件时先使用css-loader处理一下，然后将处理结果传递给style-loader，style-loader会创建一个style标签将内容写进去，然后把结果写到对应的html文件内

打开index.js，引入style.css即可

import 'style.css'

然后给div添加对应的样式

import './style.css';
function createDiv(){
    var div = document.createElement('div');
    div.innerHTML = 'test';
    div.classList.add('test');
    return div;
}
var ele = createDiv();
document.body.appendChild(ele);

演示一下，运行npm run build 查看结果，检查元素，可以看到对应的效果和css样式

屏幕快照 2020-03-11 23.39.52.png

如果你想用css预处理语言，比如sass或less的话，需要在webpack内使用对应loader，那么接下来我演示一下如何使用sass-loader处理scss文件

第一步还是安装对应的loader，npm i -D sass-loader

在安装的时候先写一个test-sass.scss

.scss {
    font-size: 30px;
    color: #f00;
}

安装完成之后，打开index.js页面，引入test-sass.scss

写入对应的样式

import './style.css';
import './test-sass.scss';
function createDiv(){
    var div = document.createElement('div');
    div.innerHTML = 'test';
    div.classList.add('scss');
    return div;
}
var ele = createDiv();
document.body.appendChild(ele);

演示一下

屏幕快照 2020-03-11 23.47.12.png