在命令行下，如何使用postcss处理css文件？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文中，苏南大叔聊一下对postcss命令行的相关理解。自从出了scss和less类似的css预处理语言后，css的世界也变得和js世界一样扑朔迷离。在往期的webpack系列文章中，苏南大叔曾经描述过postcss的一些简单使用，例如：px2rem等，具体可以参考文末链接。

在本文中，主要描述的是：postcss的命令行的简单使用方法。测试环境：win10，postcss@8.1.1,postcss-cli@8.1.0,postcss-cssnext@3.1.0。

postcss是什么

postcss和less/scss是不一样的，在苏南大叔看来，

• less/scss则是在css文件生成之前，用一些语法来编程的，就类似于ts和js的关系。
• postcss是利用一系列插件，来对css进行处理的一款工具，类似于gulp或者webpack之类的软件。

当然，苏南大叔理解的也可能有偏颇。在下面的网址，您可以去加以验证。

• https://github.com/postcss/postcss

安装相关软件

这里假设您已经安装好了node环境，然后就需要全局安装一些postcss的工具软件。一般来说，需要执行的命令是：

npm i postcss postcss-cli postcss-cssnext cssnano -g

当然，postcss体系下，还有大量其它插件，如果目您需要，可以去查找并安装。苏南大叔这里就安装了一个postcss-cssnext。目前，postcss-cssnext内置autoprefixer，并不需要额外安装。两者同时使用的时候，就会得到下面的警告信息。

Warning: postcss-cssnext found a duplicate plugin ('autoprefixer') in your postcss plugins. This might be inefficient. You should remove 'autoprefixer' from your postcss plugin list since it's already included by postcss-cssnext.
Note: If, for a really specific reason, postcss-cssnext warnings are irrelevant for your use case, and you really know what you are doing, you can disable this warnings by setting  'warnForDuplicates' option of postcss-cssnext to 'false'.

查找postcss可执行文件

苏南大叔是在win10下面查找的，敲的命令是：

where postcss

当然，您直接使用postcss字样，而不写完整路径，也是可以使用的。不过，大家如果做事严谨的话，还是可以考虑完整路径。这个小技巧在后面的文章里面，也是用得到的。

基本参数

下面的命令，是个例子：

postcss --use postcss-cssnext -o test2.css test.css

这个命令就是使用postcss-cssnext插件，来把test.css转化为test2.css。如果，您需要使用多个postcss插件的话，就是多配置参数--use（或者-u）就可以了。

postcss --u postcss-cssnext -u cssnano -o test2.css test.css

这里就使用了三个参数：

• -u加载的插件
• -o输出的文件
• 输入的文件名（路径）（貌似么有-i参数，就直接把路径放在命令行里面就行了）

因为上述三个参数，感觉就够用了。所以苏南大叔也没仔细看更多参数。更多的参数，可以点击如下链接：

• https://github.com/postcss/postcss-cli

可能存在的问题

可能会看到以下报错：

Input Error: You must pass a valid list of files to parse

就是没有识别出输入文件路径的意思，请检查相关路径问题。根据苏南大叔的观察，在win10环境下，对于要处理的css文件路径，如果写全路径的话，可能会有问题。主要就是这个斜杠的问题，应该是postcss的一个bug，估计后期会修正。

对于国内非常推崇的cssgrace插件，试了一下，直接报错。信息如下：

Plugin Error (cssgrace): TypeError: require(...) is not a function'

估计可能是作者没有紧跟时代步伐更新代码的结果吧？暂且忽略了先。

相关链接

• https://newsn.net/say/webpack-postcss.html

总结

本篇文章是为后续文章做铺垫的，欢迎查看后续postcss相关文章。

• https://newsn.net/tag/postcss/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。