安装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文件,但输出文件夹必须存在;它不会为你创建文件夹结构。