前言

postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具，帮助用户更好的管理css。这里记录一下使用方法。

使用方法

新建文件夹

npm init -y

// postcss是指插件，postcss-cli可以使用postcss指令 npm i postcss postcss-cli -D

新建文件postcss.config.js

module.exports={
    plugins:[
    // 这里就是各种插件的放入位置，执行post指令会相应执行这里的插件
        require('autoprefixer'),
        require('cssnano')
    ]
}

下载autoprefixer，cssnano插件，这些插件包括postcss postcss-cli插件都是在开发平台使用加上-D autoprefixer 它是给css加前缀 cssnano 它是压缩css代码 npm i autoprefixer cssnano -D

随意创建一个scss文件，并写上样式代码

执行post指令。style.scss指入口scss文件，-o配置项后面表示出口文件 npx postcss style.scss -o dist.css

可以看到文件确实被压缩，可是添加前缀好像没有看到。

// 查看autoprefixer插件的信息 npx autoprefixer --info

它只针对市面上86.08%的浏览器兼容，我们调整一下浏览器兼容范围

"browserslist": ["cover 99.5%"]

这串指令npx postcss style.scss -o dist.css也可放入package.json文件中

"scripts": {
  "buildcss":"npx postcss style.scss -o dist.css"
}

npm run buildcss就可以执行那一长串命令了

文档里有postcss可以使用的插件汇总