跳到主要内容

17-CSS中自动加属性前缀PostCSS

什么是属性前缀​

我们先来看一下代码：


div {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。

PostCSS​

PostCSS是一个CSS的处理平台，它可以帮助你的CSS实现更多的功能，但是今天我们就通过其中的一个加前缀的功能，初步了解一下PostCSS。

安装​

需要安装两个包postcss-loader 和autoprefixer（自动添加前缀的插件）

npm install --save-dev postcss-loader autoprefixer

postCSS推荐在项目根目录（和webpack.config.js同级），建立一个postcss.config.js文件。

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

这就是对postCSS一个简单的配置，引入了autoprefixer插件。让postCSS拥有添加前缀的能力，它会根据 can i use网站 来增加相应的css3属性前缀。

编写loader​

对postcss.config.js配置完成后，我们还需要编写我们的loader配置。

{
    test: /\.css$/,
    use: [
        {
            loader: "style-loader"
        }, {
            loader: "css-loader",
            options: {
            modules: true
            }
        }, {
            loader: "postcss-loader"
        }
    ]
}

提取CSS中的写法​

配置提取CSS的loader配置.

3.png