PostCSS 处理 loader（附带：添加 css3 前缀）

PostCSS是一个 CSS 的预处理工具，可以帮助我们：给 CSS3 的属性添加前缀，样式格式校验（stylelint），提前使用 css 的新特性比如：表格布局，更重要的是可以实现 CSS 的模块化，防止 CSS 样式冲突。

我们常用的就是使用 PostCSS 进行添加前缀，以此为例：

安装

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

# 以下可以不用安装
# cssnext可以让你写CSS4的语言，并能配合autoprefixer进行浏览器兼容的不全，而且还支持嵌套语法
$ npm install postcss-cssnext --save-dev

# 类似scss的语法，实际上如果只是想用嵌套的话有cssnext就够了
$ npm install precss --save-dev

# 在@import css文件的时候让webpack监听并编译
$ npm install postcss-import --save-dev

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, './dist')
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              sourceMap: true,
              plugins: loader => [
                require('autoprefixer')({ browsers: ['> 0.15% in CN'] }) // 添加前缀
              ]
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  }
};

设置完成之后在css文件中增加

display: flex;

增加前缀之后的效果

如果有报下列错误：是因为版本高了，引用要修改

 Replace Autoprefixer browsers option to Browserslist config.
 Use browserslist key in package.json or .browserslistrc file.

 Using browsers option cause some error. Browserslist config 
 can be used for Babel, Autoprefixer, postcss-normalize and other tools.

 If you really need to use option, rename it to overrideBrowserslist.

 Learn more at:
 https://github.com/browserslist/browserslist#readme
 https://twitter.com/browserslist

将plugins中的browsers更改为overrideBrowserslist即可，栗子如下：

       {
               loader: 'postcss-loader', options: {
                   indet: 'postcss',
                   sourceMap: true,
                   plugins: (loader) => [
                       require('autoprefixer')({overrideBrowserslist: ['> 0.15% in CN']})
                   ]
              }
           }