Question

如何使用node-sass的输出来传递postcss autoprefixer。

我不打算使用任何webpack或gulp。

我纯粹使用节点包中的cli

这是我目前的npm脚本

node-sass --watch ./src/scss --output ./dist/assets/css | postcss ./dist/assets/css/app.css --use autoprefixer --output ./dist/assets/css/app-dist.css

只有当我输出到具有不同名称的同一文件夹时，一切都有效。但如果我希望输出相同的名称，它就不起作用。

所以流程是scss - ＆gt; css - ＆gt; autoprefixer - ＆gt; compiled.css

Answer 1

我认为没有可用的node-sass api可以通过cli做到这一点。

我最终以node-sass创建的中间临时文件并行运行node-sass-chokidar和postcss，它虽然不漂亮，但可以完成工作：

node-sass-chokidar ./root.scss ./tmp/root.css --watch --source-map-embed --source-map-root file://${PWD}/ &
P1=$ postcss -w ./tmp/root.css -o ./a-very-long-path-lalala/root.css &
P2=$! wait $P1 $P2

这使您可以使用ctrl+c终止两者。另外，您也可以使用scripty将脚本移动到外部文件，以便package.json脚本保持相当短。

您也可以考虑使用口香糖或咕gr咕

Answer 2

此处讨论了该问题：https://medium.com/@rostyslavbryzgunov/problem-of-watching-scss-f5c4225802fb 这篇文章的作者创建了一个NPM软件包来解决它：https://github.com/kottenator/node-sass-watcher

我没有尝试过这个软件包，因为它已经三年没有更新了。

我也很努力地解决了这个很简单的问题，即长时间使用node-sass和postcss（带有自动前缀），我进行了很多研究和尝试。最后，我只接受了必须在watch模式下运行node-sass并将css文件写入temp目录中，然后将ccss进行监视，然后将css文件（包括前缀）写入dist目录。如果不使用temp目录，而让postcss监视然后覆盖node-sass生成的css文件，则您将陷入无限循环，其中postcss一遍又一遍覆盖它监视的文件。如果您使用postcss的--poll选项，则可以解决此问题，但是事实证明，这种方法也不可靠（有时仍会出现无限循环），并且会减慢构建过程。

解决此问题的唯一可靠方法是在监视模式下不使用node-sass和postcss，而使用例如chokidar观看sass文件，然后运行node-sass，然后运行一次postcss。（下面是一个示例：https://github.com/hellobrian/sass-recipes/tree/master/node-sass）然后主要的缺点是它的运行速度很慢，这可能是因为node-sass每次都必须启动而不是继续在监视模式下运行。（在快速的计算机上，这可能很好，但是在我的2013 MacBook Pro上，sass文件中的每次更改后，这会增加2-3秒。）

（我知道这不是一个高质量的答案，但是由于这个问题无论如何也没有引起足够的重视，所以它可能仍然有用。）

如何从node-sass输出到postcss autoprefixer

2 个答案: