webpack如何添加厂商前缀

1.首先安装所需要的postcss

npm install --save-dev postcss-loader postcss autoprefixer  

 2.在webpack.config.js文件中添加

  module: {
        // 匹配规则
        rules: [{
            test: /.(c|sc)ss$/,
            use: ['style-loader', 'css-loader', "postcss-loader", 'sass-loader'] // 从右向左解析原则
        }]
    },

3.在根目录中新建 postcss.config.js 文件,loader会自动匹配,内容如下

module.exports = {
    plugins: [
        [
            require('autoprefixer')
        ],
    ],
};

 4.page.json文件添加目标浏览器

 "browserslist": [
    "cover 99.5%"
  ]

 最终效果如下:

ps:postcss配置也可以写在webpack.config.js中,但会因版本问题不支持而报错,所以最好新建一个postcss.config.js文件

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

Web_阿凯

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值