26

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

4

8 回答 8

34

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

"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 会将 -- 之后的所有参数直接传递给您的脚本。

于 2016-07-27T01:13:15.083 回答
34

这是我的 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"
于 2016-01-14T18:45:13.340 回答
1

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

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

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

于 2016-01-15T17:51:28.393 回答
0

如果您想在.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
}
于 2019-02-11T13:01:46.710 回答
0

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

node-sass src/ -wo dist
于 2017-12-19T00:17:30.583 回答
0

我将以下内容放入 package.json 并返回sh: node-sass: command not found

> "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"
}
于 2022-03-03T21:45:22.953 回答
0

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

于 2020-04-25T09:35:02.927 回答
0

包.json：

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

npm run compile:sass

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

于 2021-10-08T14:37:10.230 回答