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

node.js CSS

村村番长

2020-03-23

所以我正在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。

第2842篇《在npm run-script中使用node-sass watch选项》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答

西门Eva小胖 2020.03.23

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

node-sass src/ -wo dist

老丝阿飞 2020.03.23

如果要在将更改保存到.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

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

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

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

乐小宇宙 2020.03.23

这是我用于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

在前面的答案的基础上，另一种选择是通过不重复脚本中的脚本参数来利用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脚本的工作方式如下：