时间戳

首页 > 解决方案 > 使用 node-sass 监视 NPM 中的 Sass 变化，并且跨平台友好

node.js - 使用 node-sass 监视 NPM 中的 Sass 变化，并且跨平台友好

问题描述

这最终是一个 NPM 问题，尽管任何特定于 Sass 的技巧都会有所帮助。最终，当我启动服务器时，我想做三件事：

"scripts": {
  "build-css": "node-sass scss -o public/stylesheets",
  "watch-css": "node-sass scss -wro public/stylesheets",
  "serve": "node ./bin/www",
}

以下是我目前的选择，由于某种原因，所有这些都不能令人满意：

从终端运行所有 3 个脚本

~$ npm run build-css && npm run watch-css && npm run serve

我宁愿不必显式运行 css 脚本，而是确保每次启动服务器时都构建和监视 CSS。

将 css 脚本放入预启动脚本中

"scripts": {
  "prestart": "node-sass scss -o public/stylesheets && node-sass scss -wro public/stylesheets",
  "start": "node ./bin/www",
}

这很可爱，但它并不是真正的跨平台——PowerShell 仍然不支持&&操作符。尽管这很烦人，但据我所知，没有办法绕过它。我会对丑陋的选择感到满意preprestart，但不幸的是它不起作用。

使用其他监视方法

"watch": {
  "build-css": "scss"
},
"scripts": {
  "build-css": "node-sass scss -o public/stylesheets",
  "serve": "node ./bin/www",
}

这可行，但它需要引入另一个依赖项，例如node-watchor nodemon。如果仅更改一个文件，这也会强制重建整个目录，这对大型项目来说可能是一件痛苦的事情。加上观看不是由 完成的node-sass，这可能意味着失去功能。

使用 npm-run-all

"scripts": {
  "build-css": "node-sass scss -o public/stylesheets",
  "watch-css": "node-sass scss -wro public/stylesheets",
  "serve": "node ./bin/www",
  "start": "npm-run-all *"
}

同样，这在理论上是可行的，但它需要引入一个依赖项来完成一项相当简单的任务。npm-run-all特别是拉出 23 个依赖项，其中许多本身具有相当深的依赖关系树，以完成一项相当简单的任务。最重要的是，这对我不起作用，因为它node-sass在子目录中查找二进制文件，而vendor子目录不是它所在的位置。我不确定是否有解决此问题的简单方法。

有些事情告诉我必须有一种更简单的方法来完成我在这里想要完成的事情，但我已经搜索了一段时间，但没有找到任何东西。任何帮助，将不胜感激。

标签： node.jsnpmsassnpm-scriptsnode-sass

解决方案

推荐阅读