Question

我已经安装了node-sass并按照Using node-sass watch option with npm run-script的底部响应中的方式设置了选项，但是，它似乎对我不起作用。

这是我的removeIf文件，是我的最新尝试：

package.json

所以我尝试了：

{
  "name": "linkup-paints",
  "description": "NPM for Linkup Paint Supplies website for 2019",
  "version": "1.0.2",
  "main": "index.js",
  "scripts": {
    "start": "run-script-os",
    "start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*, !styles/**/*' --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"",
    "build-sass": "node-sass styles/main.scss css/main.css",
    "watch-sass": "node-sass -w styles/main.scss css/main.css"
  },
  "author": "dpDesignz",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "run-script-os": "^1.0.3",
    "node-sass": "^4.9.4"
  }
}

和：

"build:sass": "node-sass -r --output-style compressed styles/main.scss -o css/main.css",
"watch:sass": "npm run build:sass && npm run build:sass -- -w"

和：

"css": "node-sass styles/main.scss -o css/main.css",
"css:watch": "npm run css && node-sass styles/main.scss -wo css/main.css"

和（如sidthesloth所建议）：

"scss": "node-sass --watch styles/main.scss -o css/main.css"

我运行"build-sass": "node-sass styles/main.scss css/main.css", "watch-sass": "node-sass -w styles/main.scss css/main.css"，完成后我运行npm i。浏览器同步启动，并观看文件更改，但是我的npm start无法编译或在更改css/main.css文件时更新。

我只是刚刚开始/学习了如何使用NPM，因此任何帮助将不胜感激。在过去的2个小时里，我都没碰上教程和答案（包括Using node-sass，Watch and Compile Sass in Five Quick Steps和Using node-sass to compile Sass files in an npm script）。

请问有人能够指出正确的方向来让我的.scss和watch工作吗？

更新：

因此，对于将来希望这样做的任何人来说，这只是一个更新，我不了解脚本的工作原理，也没有意识到我的脚本不是彼此并行运行的。我以为build触发了我所有的脚本来运行，但我没有意识到您必须调用所有这些脚本。我最终的package.json文件如下：

npm start

我最终添加了{ "name": "linkup-paints", "version": "1.0.3", "description": "NPM for Linkup Paint Supplies website for 2019", "main": "index.js", "directories": { "lib": "lib" }, "scripts": { "start": "npm-run-all --parallel browser-sync build-sass watch-sass", "browser-sync": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' -w --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"", "build-sass": "node-sass styles/main.scss css/main.css", "watch-sass": "node-sass -w styles/main.scss css/main.css" }, "keywords": [ "linkup", "2019" ], "repository": {}, "author": "dpDesignz", "license": "ISC", "devDependencies": { "npm-run-all": "^4.1.3", "browser-sync": "^2.26.3", "node-sass": "^4.9.4" }, "bugs": { "url": "http://support.dpdesignz.co" }, "homepage": "http://www.dpdesignz.co" }脚本并将npm-run-all args更改为start，因为我不需要与旧的npm-run-all --parallel browser-sync build-sass watch-sass args具有跨操作系统兼容性先前。我还将run-script-os（-w）arg放在浏览器同步行中，以使所创建的--watch文件触发同步，因为该构建实际上替换了.css文件，默认情况下不会按照浏览器同步的要求对其进行“更改”。

Answer 1

以下是我用来使用node-sass构建或监视SCSS文件的两个NPM脚本：

"build-sass": "node-sass src/public/css/main.scss dist/public/css/main.css"
"watch-sass": "node-sass -w src/public/css/main.scss dist/public/css/main.css"

希望这对您有用

使用NPM node-sass观看SASS文件

1 个答案: