PostCss使用

╰半夏微凉° 2022-11-29 03:09 91阅读 0赞

# 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 模块][Node.js]

*  创建 **package.json**

# 初始化
    npm init

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

![添加 scripts][scripts]

"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

![plugins问题][plugins]

## 第一个插件 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

![brosers问题][brosers]

*  把 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` 即可

[PostCSS CLI]: https://github.com/postcss/postcss-cli
[Node.js]: https://www.npmjs.cn/getting-started/creating-node-modules/
[scripts]: /images/20221124/c955b24c5db740ddb001812ca3f85ee5.png
[plugins]: /images/20221124/251cea87f135467a81a867bd46bf7fc8.png
[brosers]: /images/20221124/3a23fd30666448d7973ce4d4b91908ae.png
[usage-table]: https://caniuse.com/usage-table
[browserslist]: https://www.npmjs.com/package/browserslist