PostCSS

PostCSS 是一个用于处理 CSS 的工具，它可以帮助开发者在编写和处理 CSS 时自动化一系列任务，例如：自动添加浏览器前缀、转换最新的 CSS 语法为旧版本、优化和压缩 CSS 等。

一、安装

npm install postcss postcss-cli

TIP

postcss-cli脚手架，用于非构建工具下使用postcss命令行执行

二、使用

# 前提是安装了postcss-cli脚手架
npx postcss src/demo.css -o dist/demo.css -w

TIP

• -o ：用于转换输出
• -w：用于实时监听

三、插件

首先在项目根目录下创建一个postcss.config.js配置文件。

1、postcss-preset-env

根据目标环境和配置自动将CSS代码转换为向后兼容的版本。

安装命令

npm install postcss-preset-env --save-dev

配置postcss.config.js

module.exports = {
  plugins: [
    require('postcss-preset-env')
  ]
}

2、postcss-import

把通过@import直接合并到样式文件中

安装命令

npm install postcss-import

配置postcss.config.js

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

3、cssnano

压缩css代码

安装命令

npm install cssnano

配置postcss.config.js

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

4、stylelint

css语法规范提示，官网地址：https://stylelint.io/

安装命令

npm install stylelint

配置postcss.config.js

module.exports = {
    plugins:[
        require('stylelint')({
            "rules" : {
                "color-no-invalid-hex" : true
            }
        }),
    ]
}