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

苏南大叔:在命令行下,如何使用postcss处理css文件? - postcss-cli
在命令行下,如何使用postcss处理css文件?(图6-1)

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

postcss是什么

postcssless/scss是不一样的,在苏南大叔看来,

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

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

苏南大叔:在命令行下,如何使用postcss处理css文件? - postcss-readme
在命令行下,如何使用postcss处理css文件?(图6-2)

安装相关软件

这里假设您已经安装好了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处理css文件? - postcss-command-1
在命令行下,如何使用postcss处理css文件?(图6-3)

查找postcss可执行文件

苏南大叔是在win10下面查找的,敲的命令是:

where postcss

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

苏南大叔:在命令行下,如何使用postcss处理css文件? - where-postcss
在命令行下,如何使用postcss处理css文件?(图6-4)

基本参数

下面的命令,是个例子:

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参数,就直接把路径放在命令行里面就行了)

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

苏南大叔:在命令行下,如何使用postcss处理css文件? - postcss-result
在命令行下,如何使用postcss处理css文件?(图6-5)

可能存在的问题

可能会看到以下报错:

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

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

苏南大叔:在命令行下,如何使用postcss处理css文件? - postcss-command-2
在命令行下,如何使用postcss处理css文件?(图6-6)

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

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

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

相关链接

总结

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   postcss

本站的忠实读者小伙伴,正在阅读下面这些文章: