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

所以我正在npm包脚本中运行任务,但是我想在中传递watch选项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\""
}

没有并行shell或没有简写都无法工作。

我认为问题是运行脚本在引号中传递了额外的参数,因此命令如下所示:

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

我希望它可以在不添加任何依赖的情况下工作。我想念什么?

顺便说一句,我在Windows 10中,使用命令提示符/ git bash。

西门Eva小胖2020/03/23 14:33:04

我认为,对于较小的快速项目,最简单的方法是打开一个新的bash窗口并粘贴:

node-sass src/ -wo dist
老丝阿飞2020/03/23 14:33:04

如果要在将更改保存到.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
}
猴子2020/03/23 14:33:04

顺便说一句,这是我的零钱:

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

编辑:更改为异步脚本运行,进行初始编译,然后带有watch标志。

乐小宇宙2020/03/23 14:33:04

这是我用于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"
卡卡西2020/03/23 14:33:04

在前面的答案的基础上,另一种选择是通过不重复脚本中的脚本参数来利用NPM的自定义脚本参数来保持DRY buildwatch

"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脚本的工作方式如下:

  1. 运行build:sass脚本。这将编译您的CSS。
  2. build:sass再次运行脚本,但是这次包含该-w标志。当您的一个SASS文件更改时,这将编译CSS。

注意脚本--末尾使用选项watch:sass用于在执行脚本时传递自定义参数。文档

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