Postcss的常用插件介绍以及安装使用

Postcss的常用插件配置以及安装使用

Autoprefixer

Autoprefixer可以解析css文件并且添加浏览器前缀到CSS规则里

安装

cnpm i autoprefixer	

配置

const autoprefixer = require('autoprefixer');
module.exports = {
    plugins: [
        autoprefixer({
        //设置百分之100的浏览器都适配
            browsers: [">0%"]
        })
    ]
}

转换前：

div {
    width: 100px;
    height: 100px;
    display: flex;
} 

转换后：

div {
    width: 100px;
    height: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-box;
    display: flex
}

Postcss-import

Postcss-import可以对css文件进行和合并

安装

cnpm i postcss-import	

配置

const pcImport = require('postcss-import');
module.exports = {
    plugins: [
       pcImport
    ]
}

转换前：

@import './reset';
div {
    width: 100px;
} 

reset.css

*{
	margin: 1000px;
}

转换后：

* {
    margin: 1000px
}

div {
    width: 100px;
}

Cssnano

Cssnano可以对css文件进行代码压缩

安装

cnpm i cssnano

配置

const cssnano = require('cssnano');
module.exports = {
    plugins: [
       cssnano
    ]
}

转换前

div {
    width: 100px;
    height:100px;
} 

转换后

div{width:100px;height:100px;}

Postcss-cssnext

使用下个版本的css草案语法，语法见cssnext (css4)语法+

安装

cnpm i cssnext 	

配置

const cssnext = require("postcss-cssnext");
module.exports = {
    plugins: [
      cssnext
    ]
}

转换前

:root {
  --text-color: red;
}
div {
  color: var(--text-color);
}

转换后

div {
    color: red
}

Stylelint

Stylelint是强大的css代码审查工具，可以通过设置审查条件来调整报错

安装

cnpm i stylelint 

配置

const stylelint = require("stylelint");
module.exports = {
    plugins: [
    //可以手动配置审查条件，其他配置可以查看官方文档
     stylelint({
            "rules": {
                "color-no-invalid-hex": true
            }
        })
    ]
}

示例

a{
	color: #ff;
}

报错

Postcss-sprites

Postcss-sprites可以合并图片自动生成雪碧图

安装

cnpm i postcss-sprites

配置

const sprites = require("postcss-sprites");
module.exports = {
    plugins: [
        sprites({
        //配置生成路径，其他具体配置可以查看官方文档
            spritePath: './postcss'
        })
    ]
}

转换前

p{
	 background: url('../img/1.jpg');
}
a{
	 background: url('../img/2.jpg');
}

转换后

p {
    background-image: url(postcss/sprite.png);
    background-position: -500px 0px;
    background-size: 1000px 378px
}
a {
    color: #ff;
    background-image: url(postcss/sprite.png);
    background-position: 0px 0px;
    background-size: 1000px 378px
}