postcss安装与使用

PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具。它被广泛用于自动添加浏览器前缀、使用下一代 CSS 语法、支持变量和混合等等。

安装
PostCSS 可以通过 npm 或 Yarn 安装。你的项目需要先初始化 npm 或 Yarn。可以用以下命令初始化：

npm init -y  或  yarn init -y

然后可以通过以下命令安装 PostCSS：（这里以 npm 为例）

npm install postcss-cli --save-dev
npm install postcss --save-dev

使用
首先，你需要在项目的根目录下创建一个命名为 "postcss.config.js" 的配置文件，然后在这个文件中写入你要使用的插件。比如：

module.exports = {
    plugins: [
        // 例如添加自动添加浏览器前缀的插件
        require('autoprefixer')
    ]
}

然后, 在package.json中，我们可以添加一个新的脚本来运行PostCSS:

"scripts": { "css": "postcss input.css -o output.css" }

然后你只需运行 npm run css（或者若你使用Yarn，执行： yarn run css）即可。

在这个示例中，我们用到了 autoprefixer 插件，这个插件可以自动给 CSS 属性添加浏览器前缀。所以在使用之前，我们还需要单独的安装这个插件，命令如下：

npm install autoprefixer --save-dev