什么是 PostCSS

PostCSS 就是一个用 JavaScript 转换 CSS 的工具。

PostCSS 具有以下特点，但是不局限于以下列举的特点：

• 提高代码的可读性
• 使用 CSS 的未来特性
• 终结全局 CSS
• 在 CSS 避免出现错误
• 强大的栅格系统

准备工作

首先，还是把需要的依赖安装一下 package.json：

"devDependencies": {    "autoprefixer": "^9.1.3",    "css-loader": "^1.0.0",    "postcss-loader": "^3.0.0",    "style-loader": "^0.23.0",    "webpack": "^4.17.1",    "webpack-cli": "^3.1.0"  },  "scripts": {    "webpack": "webpack"  }

其次，就是准备 Webpack 的配置文件 webpack.config.js，当然，这个配置文件是一部分：

const { join } = require('path');const config = {};config.mode = 'production';config.entry = {  index: join(__dirname, './src/index.js')};config.output = {  path: join(__dirname, './dist'),  filename: '[name].bundle.js',  chunkFilename: '[name].chunk.js',  publicPath: join(__dirname, './dist/')};config.module = {  rules: []};module.exports = config;

最后，就是准备一下需要的代码文件：

index.js：

import './css/common.css';

css/common.css：

* {  margin: 0;  padding: 0;}.my-div {  width: 100%;  height: 120px;  display: flex;}

index.html：

    
    
     这是一个div
    

配置 postcss-loader

postcss-loader 的使用一定要在 css-loader 之前，只有这样才能生效。

config.module.rules.push({  test: /\.css$/,  use: [{    loader: 'style-loader',    options: {      singleton: true    }  }, {    loader: 'css-loader'  }, {    loader: 'postcss-loader'  }]});

此时执行命令 yarn webpack，会报错：

Error: No PostCSS Config found in:

这是因为没有为 PostCSS 增加配置的缘故，PostCSS 增加配置的方式有很多种，这里采用 postcss.config.js，因为这种方式容易扩展。

module.exports = {};

这个时候再执行命令 yarn webpack 的时候，就可以正常打包了。但是在浏览器中打开 index.html 会发现，CSS 并没有增加兼容的代码。

在具体配置之前，首先在 postcss-loader 中配置一下配置文件的路径。

config.module.rules.push({  test: /\.css$/,  use: [{    loader: 'style-loader',    options: {      singleton: true    }  }, {    loader: 'css-loader'  }, {    loader: 'postcss-loader',    options: {      config: {        path: join(__dirname, './')      }    }  }]});

再配置文件中加入相关的配置（以后需要增加 postcss 的相关配置，就需要在这个配置文件中添加）：

module.exports = {  plugins: {    "autoprefixer": {}  }};

由于 autoprefixer 也是需要一个配置文件的，因此，在项目的根目录中加入一个配置文件 .browserslistrc：

> 0.01%

再次执行命令，就可以在样式中看到自动生成的兼容性样式代码了。