将 node-sass 监视选项与 npm run-script 一起使用

Posted 2023-02-21

【中文标题】将 node-sass 监视选项与 npm run-script 一起使用

【英文标题】：Using node-sass watch option with npm run-script

【发布时间】：2016-04-20 05:23:42

【问题描述】：

所以我在 npm 包脚本中运行任务，但我想在 npm start 中传递监视选项。

这行得通：

"scripts": 
  "scss": "node-sass src/style.scss dist/style.css -w"

这不会编译、观察或抛出任何错误：

"scripts": 
  "scss": "node-sass src/style.scss dist/style.css",
  "start": "parallelshell \"npm run scss -- -w\""

没有parallelshell或者没有速记都不能工作。

我认为问题是运行脚本在引号中传递了额外的参数，所以命令如下：

node-sass src/style.scss dist/style.css "-w"

我希望它能够在不添加任何依赖项的情况下工作。我错过了什么？

顺便说一句，我在带有命令提示符/git bash 的 Windows 10 中。

【问题讨论】：

请考虑我的回答（how-can-i-get-node-sass-watch-and-live-reload-to-work-from-a-single-npm-script）！

【参考方案1】：

这是我的 CSS 构建设置

"scripts": 
  "css": "node-sass src/style.scss -o dist",
  "css:watch": "npm run css && node-sass src/style.scss -wo dist"
,
"devDependencies": 
  "node-sass": "^3.4.2"

-o 标志设置目录以输出 css。 我有一个非观看版本“css”，因为观看版本“css：watch”~不会在运行后立即构建~，它只会在更改时运行，所以我打电话给

npm run css 

打电话之前

node-sass src/style.scss -wo dist

如果您只希望它在更改时运行，而不是在第一次运行时运行，只需使用

"css:watch": "node-sass src/style.scss -wo dist"

【讨论】：

有没有办法逃脱它传递的双引号？就像我说的，这行得通：node-sass src/style.scss dist/style.css -w 这不行：node-sass src/style.scss dist/style.css "-w" 不过感谢您的提示。我现在就使用它们。

您可以使用反斜杠转义双引号。像：\"-w\"，这样双引号不会使 JSON 无效，但是当您在终端中运行命令时它们会显示出来

我明白了。我的意思是npm run scss -- -w 不会通过node-sass src/style.css dist/style.scss "-w"。

等等……没关系。我是个白痴。不知道为什么我认为更改之前没有做任何事情。感谢您的帮助。

【参考方案2】：

顺便说一句，这是我的改变：

"scss": "node-sass src/style.scss dist/style.css",
"start": "parallelshell \"npm run scss && npm run scss -- -w\"

编辑：更改是异步脚本运行，用于初始编译，然后使用监视标志。

【讨论】：

我不得不把第二行改成这样，观察者才能工作（parallelshell 2.0）："start": "parallelshell \"npm run scss\" \"npm run scss -- -w\""

呵呵，我也有 2.0。如果您同步运行任务会怎样，例如：npm run scss & npm run scss -- -w。无论哪种方式都适用于我..

不适合我 - watcher 实际上并没有保持在“watch”模式，所以我坚持使用 parallelshell 文档。同时我创建了一个“prewatch”任务："prewatch": "npm run scss"

您能编辑并解释答案吗？ “这是我的零钱”相当含糊。什么是平行壳？

【参考方案3】：

在前面的答案的基础上，另一个选择是利用 NPM 的 custom script arguments 保持 DRY，方法是不在 watch 脚本中重复 build 脚本参数：

"scripts": 
  "build:sass": "node-sass -r --output-style compressed src/style.scss -o dist",
  "watch:sass": "npm run build:sass && npm run build:sass -- -w"

在上面的例子中，watch:sass 脚​​本的工作方式如下：

运行build:sass 脚本。这将编译您的 CSS。 再次运行build:sass 脚本，但这次包括-w 标志。当您的 SASS 文件之一发生更改时，这将编译您的 CSS。

请注意watch:sass 脚本末尾使用的-- 选项。这用于在执行脚本时传递自定义参数。来自docs：

从 npm@2.0.0 开始，您可以在执行脚本时使用自定义参数。 getopt 使用特殊选项 -- 来分隔选项的结尾。 npm 会将 -- 之后的所有参数直接传递给您的脚本。

【讨论】：

老兄，这是金，谢谢。仅供参考，对于其他 node-sass 选项：npmjs.com/package/node-sass#command-line-interface

警告 从 Yarn 1.0 开始，脚本不需要“--”来转发选项。在未来的版本中，任何显式的“--”都将按原样转发给脚本。脚本应更新为"watch:sass": "npm run build:sass && npm run build:sass -w"

【参考方案4】：

在我看来，对于一个较小的快速项目来说，最简单的方法就是打开一个新的 bash 窗口并粘贴：

node-sass src/ -wo dist

【参考方案5】：

如果您想在将更改保存到 .scss 文件时自动查看和编译更改，您可以使用此解决方案：

"scripts": 
  "watch:sass": "node-sass -w path/to/your/scss --output-style compressed", 
  // example  :  node-sass -w public/styles/scss/bootstrap.scss public/styles/style.css --output-style compressed

【参考方案6】：

如果你使用 vcode ，我更喜欢使用扩展观看 sass live-server 这是非常有用的方式

【参考方案7】：

package.json:

"scripts": 
"compile:sass": "node-sass ./styles.scss ./styles.css -w

npm run compile:sass

请注意，如果您运行此命令，样式不会立即更新到 css 文件中， 仅当它检测到 sass 文件中的更改时，它才会更新您的 css 文件，而不是在初始运行时。