postcss安装

安装PostCSS

PostCSS需要Node.js，但本教程演示了如何从任何文件夹中安装和运行PostCSS--甚至那些不是Node.js的项目。你也可以从webpack、Parcel、Gulp.js和其他工具中使用PostCSS，但我们将坚持使用命令行。

通过运行以下程序在你的系统中全局安装PostCSS。

npm install -g postcss-cli

通过输入这个来确保它的工作。

postcss --help

安装你的第一个PostCSS插件

你至少需要一个插件来做任何实际工作。PostCSS导入插件是一个不错的选择，它可以内联所有的@import 声明并将你的CSS合并到一个文件中。像这样在全球范围内安装它。

npm install -g postcss-import

要测试这个插件，请打开或创建一个新的项目文件夹，如cssproject ，然后为你的源文件创建一个src 子文件夹。创建一个main.css 文件来加载所有的参数。

/* src/main.css */
@import '_reset';
@import '_elements';

然后在同一文件夹中创建一个_reset.css 文件。

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

之后再创建一个_elements.css 文件。

/* src/elements.css */
body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

从项目的根文件夹中运行PostCSS，通过传递输入的CSS文件、一个插件列表到--use ，以及一个--output 文件名。

postcss ./src/main.css --use postcss-import --output ./styles.css

如果你没有任何错误，下面的代码将被输出到项目根目录下的一个新的styles.css 文件。

/* src/main.css */
/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}
/* src/elements.css */
body {
  font-family: sans-serif;
}
label {
  user-select: none;
}
/* sourceMappingURL=data:application/json;base64,...

注意，PostCSS可以在任何地方输出CSS文件，但输出文件夹必须存在；它不会为你创建文件夹结构。