webpack中使用loader加载css、less、sass样式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Tomwildboar/article/details/82144446

目的：因为传统的link加载css样式会发起二次请求，所以我们需要在webpack中使用loader加载css样式

准备：你需要准备一个已经配置好的webpack项目：https://blog.csdn.net/Tomwildboar/article/details/82141824

配置cssloader

 第一步：安装相对应的插件 （cnpm i style-loader css-loader -D）

 如果出现警告说：需要依赖webpack就再安装一下

 第二步：配置webpack.config.js

 配置less loader

第一步：安装插件（cnpm i less-loader less -D）

第二步：配置

配置sass loader

第一步：安装插件 （cnpm i sass-loader node-sass -D）

 第二步：配置

测试

mian.js

index.css & index.scss

 

index.html

 启动项目 

结果：