webpack打包安装(二)之Loader的配置（样式）

首先我们要明白webpack为什么需要使用Loader？

因为webpack不能直接处理CSS 、图片等资源，需要使用Loader进行处理。

1.CSS-Loader

我们需要对一些css文件进行处理，所以我们导入了css-loader包进行处理。

首先我们安装一下开发环境依赖。

npm i css-loader -D

 同样我们在webpack.config.js中进行配置，使其webpack能识别css文件类型。

 我们可以测试一下 css-loader导入css样式时是否出错。

  我们可以看到css-loader可以成功的导入css文件，但是css样式无法生效于是我们需要再次安装

style-loader。

2.style-loader

npm i style-loader -D

配置style-loader

 

 我们重新构建后，css样式就可以成功体现出来了。

3.less-loader

样式文件有很多预编译，可能在开发过程中会使用less进行预处理。

所以，我们webpack需要对less进行配置。

首先，我们先给开发环境安装个less，避免系统没有less依赖以致出现开发问题

npm i less -D

然后，我们在项目中的css目录中新建一个less文件，列如：

 

 然后我们就可以安装less-loader了，我们这里也只在开发环境中安装，毕竟这个只是一个less编译成css的依赖loader，对我们上线的项目代码没有影响。

npm i less-loader -D 

同样，我们在webpack.config.js文件中对less-loader进行配置，我们使用一下简写形式进行设置。

一样的使用npm run build进行编译。

 我们再次使用Live Server打开index.html文件。

less文件成功的编译成浏览器可以识别的css样式，并且可以成功渲染样式。