前言

postcss 是一个通过 JavaScript 来转换样式的工具。它在使用上与 less 和 node-sass 类似，可直接对 css 进行添加浏览器前缀等处理，将其转为可兼容的 css 代码。

它工作时将根据 browserslist 所指定的兼容浏览器范围进行代码转换。对于 browserslist 的说明，可以参考 browserslist及其使用。

环境准备

1

npm i postcss postcss-cli autoprefixer -D

上面安装的三个包分别为：

• postcss: 最基本的 css 解析器，但除了解析功能以外啥都干不了，想实现功能需要其他插件帮助。
• postcss-cli：postcss 不允许像 browserslist 那样直接在终端中使用，如需使用则需要借助 postcss-cli 工具。
• autoprefixer：用于根据浏览器兼容性对 css 属性进行添加前缀等行为。

食用方式

这里有 ./src/css/test.css：

1
2
3
4
5
6
7

.example {
    display: grid;
    color: #11451419;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

此时的 .browserlistrc 配置为：

1
2
3

>1%
last 4 versions
not dead

自动添加前缀

下面的语句可以将上面的 css 文件进行解析，解析结果被放在同级的 ret.css 中。

1

npx postcss --use autoprefixer -o ./src/css/ret.css ./src/css/test.css

./src/css/ret.css：

1
2
3
4
5
6
7
8
9

.example {
    display: grid;
    color: #11451419;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    background: linear-gradient(to bottom, white, black);
}

postcss-preset-env

上面的示例中可以发现一个问题：作为 color 属性的新写法 hex-color，不少浏览器并没有对此进行兼容，但在上面的示例中 postcss 并没有对该属性进行处理。

其实对于 Postcss，有各式各样的插件来使其完成各种功能，对于 color 这种我们应该同时使用另一个插件，但这样似乎操作过于繁琐了而且容易遗漏。因此便有了一个整合了所有基本功能的插件 postcss-preset-env。

1

npm i postcss-preset-env -D

与 autoprefixer 使用方式完全相同，我们对处理指令进行一些修改

1

npx postcss --use postcss-preset-env -o ./src/css/ret.css ./src/css/test.css

./src/css/ret.css：

1
2
3
4
5
6
7
8
9

.example {
    display: grid;
    color: rgba(17,69,20,0.09804);
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    background: linear-gradient(to bottom, white, black);
}

这样便实现了我们所需要的功能。

webpack 中使用 postcss

在 webpack 中，postcss 的加载器为 postcss-loader，此时仅需要安装 postcss-loader，不需要安装 postcss 与 postcss-cli。

尽管该加载器与 sass-loader 和 less-loader 类似，在内部依赖一个工具解析，在这里为 postcss。但不同的是，postcss-loader 已经内部安装了 postcss，不需要我们再额外去安装。而 postcss-cli 仅用于以命令方式交互使用 postcss， 因此也不需要安装。

1

npm i postcss-loader -D

由于 postcss 的工作原理是对 css 代码进行解析，得到兼容后的 css 代码，不难理解 postcss-loader 该放置的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

但这样其实是不会起任何作用的。我们知道 postcss 除了解析 css 代码以外是什么也做不了的，想实现功能还需要使用插件。下面将会讲解插件的加载方法。

插件的配置方法

插件的种类很多，这里还是使用集合了所有基本功能的插件 postcss-preset-env 。

1

npm i postcss-preset-env -D

使用插件后，也就不能像其他 loader 那样简单配置了，而是需要在 options 中进行相应配置。不同的 loader 有不同的配置方法，可以参考各自的官方文档。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

const postcssPresetEnv = require( "postcss-preset-env" );

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

上面的 postcss-preset-env 其实可以直接在 plugins 数组中以字符串 "postcss-preset-env" 形式编写，但并不是所有的插件都可以这样，需要参考各插件官网文档给予的支持说明。

postcss.config.js

上述配置方式可以发现一个问题，postcss-loader 的配置代码相对比较繁琐，但同样的代码却需要在 css、less、sass 多个地方进行配置，代码非常繁琐臃肿。

同时，使用交互命令执行时，--use 参数每次都要输入也让人厌烦。便有了 postcss.config.js 配置文件。

在项目根目录下创建 postcss.config.js，输入以下内容。

1
2
3
4
5
6

const PostcssPresetEnv = require( "postcss-preset-env" );

module.exports = {
    // 这里其实也可以直接写 "postcss-preset-env" 字符串，不需要 require 引入
    plugins: [ PostcssPresetEnv ]
}

配置好后就可以优化交互指令或 webpack 配置文件的内容了。

指令方式

此时可以省略 --use 参数。

1

npx postcss -o ./src/css/ret.css ./src/css/postcss.css

webpack

此时可以将 postcss-loader 改为简写模式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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