webpack总结(3)处理项目中的css (less—css,sass—css)

本文介绍了如何使用Webpack处理项目中的CSS,包括安装和配置style-loader、css-loader,以及处理LESS和SASS文件。重点讲解了postcss-loader作为CSS后处理器的作用,如何添加浏览器前缀,并解决CSS文件import时postcss-loader不生效的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

安装style- loader css-loader

新建css文件夹,新建common.css文件

webpack把任何资源都视为模块,在入口文件app.js中引入需要的模块(可以require方式引用,此处我们统一用es6的import方式引用)

在webpack.config.js中,配置css的loader,loader之间用!号串联起来

npm run webpack 打包,页面成功加载css文件。

postcss-loader

postcss-loader针对webpack打包使用的loader, css后处理器,官方解释:


安装postcss-loader


安装 加浏览器前缀的这个postcss的插件。。。


在webpack.config.js中,添加postcss-loader,loaders数组中的处理顺序是从右到左 


postcss的插件autoprefixer 怎么使用呢?


旧版本的postcss方式(大同小异),传入broswers对象,自动加前缀,兼容浏览器最近5个版本。


打包后结果果真自动加了前缀,postcss的插件已经生效了


如果在css文件中import又一css文件,打包后页面中生成2个style标签,import进来的css并没有加载postcss-loader,怎么解决呢?


?后面传入参数,表示在css-loader之后(?号之后),指定几个数量的loader来处理import进来的资源,css-loader之后只有一个postcss-loader,来处理css文件中import又一css资源


import进来的css成功加载postcss-loader

less

如要打包的项目中引用了less,npm安装less,再按照less-loader

npm install less

npm install less-loader --save-dev

安装成功后,在webpack.config.js的module-loaders中新增匹配规则


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值