PostCSS |

简介

PostCSS 是一个允许使用 JS 插件转换样式的工具。这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins，编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。

使用

在构建工具 Webpack 中使用，以自动添加浏览器前缀为例

postcss-loader

1
2
3

$ npm i postcss-loader -D
$ npm i precss -D
$ npm i autoprefixer -D

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                // exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                      	options:{}
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options:{}
                    }
                ]
            }
        ]
    }
}

exclude 此选项要考虑是否引入 npm 安装的 css，如

import ‘normalize.css’

然后创建 postcss.config.js：

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

编译前：

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

编译后：

.example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: -webkit-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

如果使用了 scss 或其它预处理语言，则需要在该 loader 之前使用

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