如何从 node-sass 获取输出到 postcss autoprefixer

Posted 2023-02-22

【中文标题】如何从 node-sass 获取输出到 postcss autoprefixer

【英文标题】：How to get the output from node-sass to postcss autoprefixer

【发布时间】：2018-04-12 10:46:04

【问题描述】：

如何使用 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 -> css -> autoprefixer -> compiled.css

【问题讨论】：

您能找到解决方案吗？

【参考方案1】：

我认为没有可用的 node-sass api 允许您通过 cli 执行此操作。

我最终并行运行了 node-sass-chokidar 和 postcss，并使用了一个由 node-sass 创建的中间临时文件，它并不漂亮，但它完成了工作：

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 脚本就会保持相当短。

你也可以考虑使用 gulp 或 grunt。

【参考方案2】：

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

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

我也为这个看似简单的使用node-sass和postcss（带autoprefixer）的问题苦苦挣扎了很长时间，研究并尝试了很多。最后，我接受了必须在监视模式下运行 node-sass 并将 css 文件写入临时目录，postcss 监视然后将 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 秒。）

（我知道这不是一个高质量的答案，但是由于这个问题无论如何都没有引起很多关注，所以它可能仍然有用。）