解决wepacke配置postcss-loader时autoprefixer失效问题

摘要:
今天在配置postcss-loader,使用autoprefixer发现根本没有用。postcss.config.js中是这样的:module.exports={plugins:[require]}然后打包也没报错,只是没有起任何作用,一些需要加前缀的地方毫无变化。没作用岂不是白配了。然后我又去搜索如何解决autoprefixer失效问题,发现还需要配置兼容的浏览器。module.exports={plugins:[require]}这里兼容浏览器的版本可以自己设置。我用我蹩脚的英语理解了一下大概意思,就是使用browserslist去替换browsers。browserslist不是添加在postcss.config.js中,而是添加在package.json中。这样做是为了避免browsers可能会导致的错误。

今天在配置postcss-loader,使用autoprefixer发现根本没有用。

postcss.config.js中是这样的:

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

然后打包也没报错,只是没有起任何作用,一些需要加前缀的地方毫无变化。没作用岂不是白配了。然后我又去搜索如何解决autoprefixer失效问题,发现还需要配置兼容的浏览器。我又按照方法在postcss.config.js中配置。

module.exports ={
  plugins:[
      require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 8",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 3 iOS versions"]
        })
  ]
}

这里兼容浏览器的版本可以自己设置。

然后打包,结果成功,该添加的前缀都添加了。但是却有一段警告:

解决wepacke配置postcss-loader时autoprefixer失效问题第1张

虽然不影响结果,可这红的黄的提示对我们程序员来说十分不友好呀,所以我一定要干掉它。我用我蹩脚的英语理解了一下大概意思,就是使用 browserslist去替换browsers。browserslist不是添加在postcss.config.js中,而是添加在package.json中。这样做是为了避免browsers可能会导致的错误。所以要想完美解决,就需要这样:

postcss.config.js

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

package.json

 "browserslist": [
      "defaults",
      "not ie < 8",
      "last 2 versions",
      "> 1%",
      "iOS 7",
      "last 3 iOS versions"],

这段加在author,keywords同一级

解决wepacke配置postcss-loader时autoprefixer失效问题第2张

免责声明:文章转载自《解决wepacke配置postcss-loader时autoprefixer失效问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇加密解密技术—Web.config加密和解密Linux中VSFTP的配置下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue项目中 —— rem布局适配方案

1、安装插件  安装 amfe-flexible、postcss-px2rem-exclude cnpm i amfe-flexible postcss-px2rem-exclude --save 安装完毕,会在 package.json 文件的 dependencies 属性中看到如下: 2、在main.js文件中引入 import 'amfe-fle...

第一节:Webpack简介、安装-配置-打包、常用loader的使用(css/style/less/postcss-loader)

一. 简介 1. Webpack背景  (1). 事实上随着前端的快速发展,目前前端的开发已经变的越来越复杂了:  A. 比如开发过程中我们需要通过模块化的方式来开发;  B. 比如也会使用一些高级的特性来加快我们的开发效率或者安全性,比如通过ES6+、TypeScript开发脚本逻辑, 通过sass、less等方式来编写css样式代码;  C. 比如开发...

webpack入门(转载)

     阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,如果你对webpack感兴趣,本文中有一个贯穿始终的例子,如果你能把这个例子...

npm run build报错 No PostCSS Config found in

在项目根目录新建postcss.config.js文件,并对postcss进行配置: module.exports ={ plugins: [ require('autoprefixer')//自动添加css前缀 ] };...

vue3+ts的PC端自适应布局

1 安装npm install amfe-flexible postcss-px2rem -S2 在main.ts中引入import 'amfe-flexible/index.js'3 在已有的vue.config.js(没有就在根路径下新建一个) css: { loaderOptions: { postcss: {...

更便捷的css处理方式-postcss

更便捷的css处理方式-PostCSS 一般来说介绍一个东西都是要从是什么,怎么用的顺序来讲。我感觉这样很容易让大家失去兴趣,先看一下postcss能做点什么,有兴趣的话再往下看,否则可能没有耐心看下去。让我们开始吧 postcss能做什么 补全css属性浏览器前缀 手写的代码可以是这样的: .div{ display: flex; } post...