PostCss使用

PostCSS 插件使用

PostCSS CLI

2_postcss.css 是源文件， 3_post.css 是生成的文件

• 全局安装 postcss-cli

npm install postcss-cli -g

• 全局安装 autoprefixer

npm install autoprefixer -g                  

• 全局安装后，就可以直接调用如下命令

postcss 2_postcss.css

全局安装比较方便，下面演示的是本地安装

如何创建 Node.js 模块

• 创建 package.json

# 初始化
npm init

• 可以在 package.json “scripts” 中添加 post（以后 npm run post 即可）

"scripts": {
    "post": "./node_modules/.bin/postcss 2_postcss.css -o 3_post.css"
},

• 本地安装 postcss-cli （Windows 终端要切换成 GitBash）

# 安装 postcss-cli
npm install postcss-cli
# 运行检验（终端要切换成 GitBash）
./node_modules/.bin/postcss 2_postcss.css

• 第一次运行会出现如下情况，先不用管。是因为没有创建配置文件

// 没有设置解析器
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing

第一个插件 autoprefixer（格式化/加前缀）

• 在本地安装 autoprefixer

npm install autoprefixer

• 新建 postcss.config.js 配置文件，之后添加如下内容

const autoprefixer = require('autoprefixer');
module.exports = {
    plugins: [
        autoprefixer({
            browsers:['>0%']
        })
    ]
};

• 在终端运行一下 npm run post ，运行后又发现新问题（但不影响文件的生成）

// 版本问题，引用有修改
Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option can cause errors. Browserslist config 
can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist

• 把 browsers 修改为 overrideBrowserslist 即可

  浏览器占比参考：usage-table

  browserslist 使用用法参考：browserslist

overrideBrowserslist:['>0%']

第二个插件 postcss-import（合并样式表）

• 在本地安装 postcss-import

npm install postcss-import

• 新建 4_post.css 增加内容，并让 2_postcss.css 引入@import 4_post.css

• 修改 postcss.config.js 配置文件

const autoprefixer = require('autoprefixer');
const atImport = require('postcss-import');
module.exports = {
    plugins: [
        atImport,
        autoprefixer({
            overrideBrowserslist:['>=0%']
        }),
    ]
};

• 在终端运行一下 npm run post 即可

第三个插件 cssnano（压缩代码）

• 在本地安装 cssnano

npm install cssnano 

• 修改 postcss.config.js 配置文件

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

• 在终端运行一下 npm run post 即可

第四个插件 cssnext

• 在本地安装 postcss-cssnext

npm install postcss-cssnext

• 在 2_postcss.css 添加如下代码

  cssnext 只支持用 :root 定义变量

  @apply 类似 mixin

:root{
    --mainColor: red;
    --danger-theme:{
        color: white;
        background-color: red;
    };
}
a{
    color: var(--mainColor);
}
.danger{
    @apply --danger-theme;
}

• 修改 postcss.config.js 配置文件

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

• 在终端运行一下 npm run post 即可

第五个插件 precss

• 变量

• 条件（if）

• 循环

• Mixin Extend

• import

• 属性值引用

• 在本地安装 precss

npm install precss

• 在 2_postcss.css 添加如下代码

$blue: #056ef0;
$column: 200px;
.menu {
    width: calc(4 * $column);
}
.menu_link {
    background: $blue;
    width: $column;
}
.notice--clear {
    @if 3 < 5 {
        background: green;
    } @else {
        background: blue;
    }
}
@for $i from 1 to 3 {
    .b-$i {
        width: $(i) px;
    }
}

• 修改 postcss.config.js 配置文件

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

• 在终端运行一下 npm run post 即可

PostCSS 支持的构建工具(Gulp)

• CLI 命令行工具

• webpack postcss-loader

• Gulp gulp-postcss

• Grunt grunt-postcss

• Rollup rollup-postcss

• 在本地安装 gulp-cli 、 gulp 和 gulp-postcss

npm install gulp-cli
npm install gulp
npm install gulp-postcss

• 创建 gulpfile.js 添加如下代码

const gulp = require("gulp");
const autoprefixer = require("autoprefixer");
const atImport = require("postcss-import");

// 指定任务名为 postcss
gulp.task("postcss", function () {
    var postcss = require("gulp-postcss");
    // 指定源文件来自 2_postcss.css
    return gulp
        .src("2_postcss.css")
        .pipe(
            postcss([
                atImport,
                autoprefixer({
                    overrideBrowserslist: [">=0%"],
                }),
            ])
        )
        .pipe(gulp.dest("3_post"));
});

• 在终端运行一下 gulp postcss 即可