首先我们要明白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样式,并且可以成功渲染样式。