Vue PostCss插件——autoprefixer,自动补全css浏览器前缀

10 篇文章 0 订阅
9 篇文章 0 订阅

Autoprefixer是一款基于PostCSS插件,用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀 。它是 Google 推荐的,并在Twitter和阿里巴巴中使用。
可以实现css3代码自动补全,也可以运用到sass、less中

前端开发中,为兼容所有浏览器,部分CSS属性需要加上不同的浏览器前缀,这些属性多且难记。
当然,我们可以手动添加,这样会使开发变得枯燥无味,且容易出错、遗漏,可能会增加不必要的调试。这样既浪费时间,又在无形中给自己添加了很多没必要的工作量。
Autoprefixer 就能很方便的解决上述问题,简化我们的开发模式。

一、我们先来瞧一瞧Autoprefixer 的效果

Autoprefixer处理前css代码

display: flex;

Autoprefixer处理后css代码

display: -webkit-box;
display: -ms-flexbox;
display: flex;

二、autoprefixer安装步骤(vue-cli3)

1. 前置依赖安装

npm install -D css-loader style-loader

2. 安装postcss依赖相关依赖

npm install -D postcss-loader autoprefixer postcss

3. 在webpack.config.js中进行配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      }
    ]
  }
}

4. 配置autoprefixer

  • 方式一:在postcss.config.js进行配置
    module.exports = {
        plugins: {
          // 兼容浏览器,添加前缀
          'autoprefixer':{
              overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8"
                //'last 10 versions', // 所有主流浏览器最近2个版本
            ],
            grid: true
          }
        }
    }
    
  • 方式二:在postcss.config.js进行配置
    module.exports = {
        plugins: [
          // 兼容浏览器,添加前缀
          require('autoprefixer')({
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8"
              //'last 2 versions', // 所有主流浏览器最近2个版本
          ],grid: true})
     
        ]
      }
    
  • 方式三:分为两步
    • 第一步,在posscss.config.js 文件配置
       module.exports = {
           plugins: [
               require('autoprefixer')()
           ]
       }
    
    "browserslist": [
      "defaults",
       "not ie < 11",
       "last 2 versions",
       "> 1%",
       "iOS 7",
       "last 3 iOS versions"
     ]
    

三、常见错误

ERROR Failed to compile with 1 errors

ERROR  Failed to compile with 1 errors                                                             
error  in ./src/main.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] C:\Users\11411\Desktop\wk\iphone\src\main.js: C:\Users\11411\Desktop\wk\iphone contains 
both .browserslistrc and package.json with browsers (While processing: "C:\\Users\\11411\\Desktop\\wk\\iphone\\node_modules\\@vue\\cli-plugin-babel\\preset.js")
    at C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\node.js:313:15
    at eachParent (C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\node.js:48:18)
    at Object.findConfig (C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\node.js:285:20)
    at Function.loadConfig (C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\node.js:218:37)
    at browserslist (C:\Users\11411\Desktop\wk\iphone\node_modules\browserslist\index.js:411:31)
    at getTargets (C:\Users\11411\Desktop\wk\iphone\node_modules\@babel\helper-compilation-targets\lib\index.js:199:48)
    at module.exports (C:\Users\11411\Desktop\wk\iphone\node_modules\@vue\babel-preset-app\index.js:150:17)        
    at C:\Users\11411\Desktop\wk\iphone\node_modules\_@babel_core@7.10.3@@babel\core\lib\config\full.js:199:14     
    at Generator.next (<anonymous>)
    at Function.<anonymous> (C:\Users\11411\Desktop\wk\iphone\node_modules\_@babel_core@7.10.3@@babel\core\lib\gensync-utils\async.js:26:3)
    at Generator.next (<anonymous>)
    at step (C:\Users\11411\Desktop\wk\iphone\node_modules\_gensync@1.0.0-beta.1@gensync\index.js:254:32)
    at evaluateAsync (C:\Users\11411\Desktop\wk\iphone\node_modules\_gensync@1.0.0-beta.1@gensync\index.js:284:5)  
    at Function.errback (C:\Users\11411\Desktop\wk\iphone\node_modules\_gensync@1.0.0-beta.1@gensync\index.js:108:7)
    at errback (C:\Users\11411\Desktop\wk\iphone\node_modules\_@babel_core@7.10.3@@babel\core\lib\gensync-utils\async.js:70:18)
    at async (C:\Users\11411\Desktop\wk\iphone\node_modules\_gensync@1.0.0-beta.1@gensync\index.js:183:31)

 @ multi (webpack)-dev-server/client?http://10.172.3.102:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

错误原因分析:

根目录.browserslistrc文件,和package.jsonbrowserslist的相关配置,两者作用相同,同时引用存在冲突。

解决办法:

删除.browserslistrc文件,在package.json中对browserslist进行配置。


个人站点:足各路的博客掘金CSDN关注足各路、前端不迷路!

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值