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

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

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

配置cssloader

 第一步:安装相对应的插件 (cnpm i style-loader css-loader -D)

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

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

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

 第二步:配置webpack.config.js

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

 配置less loader

第一步:安装插件(cnpm i less-loader less -D)

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

第二步:配置

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

 

配置sass loader

第一步:安装插件 (cnpm i sass-loader node-sass -D)

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

 第二步:配置

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

测试

mian.js

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

index.css & index.scss

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

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

index.html

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

 启动项目 

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

结果:

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