移动端 css3前缀 autoprefixer 插件

自动添加css3前缀意义？

各种模板版本、参数配置不生效，有这功夫直接去网站版本贴代码
多点快乐，少点烦恼

如果仍需要去配置，继续... ↓↓↓

前置工作

• 1. 前置依赖安装

npm install css-loader style-loader -D

• 2. 安装postcss依赖相关依赖

npm install postcss-loader autoprefixer postcss  -D

• 3. 创建并配置 postcss.config.js
     方式一，浏览器兼容列表browserslist在postcss.config.js内

module.exports = {
    plugins: {
      // 兼容浏览器，添加前缀
      'autoprefixer': {
            overrideBrowserslist: [
                "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8"
            ],
            grid: true
        }
    }
}

[ 注 ]：

• overrideBrowserslist (array) : Try to not use it. The best practice is to use .browserslistrc config or browserslist key in package.json
  不是好的方式，尽量不要用，browserslist最好放在.browserslistrc或者package.json内
• postcss.config.js内 overrideBrowserslist 的优先级高于 package.json的browserslist，且不能为空，否则会不生效。

方式二，把postcss.config.js更精简一些 [ 官方建议的方式 ]
浏览器兼容列表browserslist在package.json内

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

• 3.1 如果与 postcss-pxtorem 移动端单位包一起使用，需要

module.exports = {
    plugins: {
        // flexible配置
        "postcss-pxtorem": {
            "rootValue": 75, // 设计稿宽度的1/10
            "propList": ["*"] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
        },
        'autoprefixer': { }
    }
}

• 4.创建webpack.config.js文件，官方配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', { loader: 'postcss-loader',
          options: {
            plugins: [
              require('autoprefixer')
            ],
          }
        }]
      }
    ]
  }
}

或 官方写法：

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

浏览器兼容配置参数

文档地址

> 5%: 基于全球使用率统计而选择的浏览器版本范围。>=,<,<=同样适用。
> 5% in US : 同上，只是使用地区变为美国。支持两个字母的国家码来指定地区。
> 5% in alt-AS : 同上，只是使用地区变为亚洲所有国家。这里列举了所有的地区码。
> 5% in my stats : 使用定制的浏览器统计数据。
cover 99.5% : 使用率总和为99.5%的浏览器版本，前提是浏览器提供了使用覆盖率。
cover 99.5% in US : 同上，只是限制了地域，支持两个字母的国家码。
cover 99.5% in my stats :使用定制的浏览器统计数据。
maintained node versions :所有还被 node 基金会维护的 node 版本。
node 10 and node 10.4 : 最新的 node 10.x.x 或者10.4.x 版本。
current node :当前被 browserslist 使用的 node 版本。
extends browserslist-config-mycompany :来自browserslist-config-mycompany包的查询设置
ie 6-8 : 选择一个浏览器的版本范围。
Firefox > 20 : 版本高于20的所有火狐浏览器版本。>=,<,<=同样适用。
ios 7 :ios 7自带的浏览器。
Firefox ESR :最新的火狐 ESR（长期支持版） 版本的浏览器。
unreleased versions or unreleased Chrome versions : alpha 和 beta 版本。
last 2 major versions or last 2 ios major versions :最近的两个发行版，包括所有的次版本号和补丁版本号变更的浏览器版本。
since 2015 or last 2 years :自某个时间以来更新的版本（也可以写的更具体since 2015-03或者since 2015-03-10）
dead :通过last 2 versions筛选的浏览器版本中，全球使用率低于0.5%并且官方声明不在维护或者事实上已经两年没有再更新的版本。目前符合条件的有 IE10,IE_Mob 10,BlackBerry 10,BlackBerry 7,OperaMobile 12.1。
last 2 versions :每个浏览器最近的两个版本。
last 2 Chrome versions :chrome 浏览器最近的两个版本。
defaults :默认配置> 0.5%, last 2 versions, Firefox ESR, not dead。
not ie <= 8 : 浏览器范围的取反

报错（从入门到放弃）

• 安装postcss插件 浏览器前缀 报错

Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8.
Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8.

报错原因： autoprefixer版本过高
解决方案： 重新安装，降低autoprefixer版本
执行：

npm install autoprefixer@8.0.0 -D

• 关于安装autoprefixer浏览器前缀插件错误
  Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'

npm install autoprefixer@9.8.6 -D

正常运行package.json依赖版本参考

参考