在 npm 运行-script 中使用 node-sass watch 选项

Question

所以我运行在 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 或 shorthand 都无法工作。

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

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

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

顺便说一句，我在 Windows 10 中使用命令 prompt/git bash。

Answer 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 的目录。我有一个 non-watching 版本 "css" 因为观看版本 "css:watch" ~不会在运行~ 时立即构建，它只会运行发生变化，所以我打电话给

npm run css

在调用

之前

node-sass src/style.scss -wo dist

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

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

Answer 2

顺便说一句，这是我找的零钱：

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

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

Answer 3

基于之前的答案，另一种选择是利用 NPM 的 custom script arguments 通过不在 watch 脚本中重复 build 脚本参数来保持 DRY：

"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:

As of npm@2.0.0, you can use custom arguments when executing scripts. The special option -- is used by getopt to delimit the end of the options. npm will pass all the arguments after the -- directly to your script.

Answer 4

我认为最简单的方法是，对于较小的快速项目，只需打开一个新的 bash window 并粘贴：

node-sass src/ -wo dist

Answer 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
}

Answer 6

package.json:

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

npm run compile:sass

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

在 npm 运行-script 中使用 node-sass watch 选项

Using node-sass watch option with npm run-script

node.js

sass

npm

build-tools

node-sass