webpack学习笔记-样式loader的使用

48 阅读1分钟

处理css的资源

如果需要使用css-loader,需要安装webpack@5,首先你需要先安装css-loader

npm install css-loader --save-dev
npm install style-loader --save-dev

然后把loader应用到你的webpack的配置中。

webpack.config.js

image.png

处理less

webpack将Less处理成css的操作

首先你需要先安装 less 和 less-loader:

npm install less less-loader --save-dev

然后将该loader添加到webpack配置中:

webpack.config.js

image.png

处理sass

加载SASS/SCSS 文件并将它们编译为css

安装sass, sass-loader

npm install sass sass-loader --save-dev

然后将sass-loader添加到webpack配置中去

webpack.config.js

image.png

处理stylus

一个webapck的loader,可以将stylus编译成css

安装 stylus-loader

npm install stylus stylus-loader --save-dev

然后将stylus-loader添加到webpack配置中去

webpack.config.js

image.png