css - 使用 NPM node-sass 查看 SASS 文件

Question

我已经安装了 node-sass 并设置了选项，就像在 Using node-sass watch option with npm run-script 上的底部响应中一样，但是，它似乎对我不起作用。

这是我最近尝试的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"

和:

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

和(如 sidthesloth 所建议的那样):

"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 没有编译，或者在我更改 .scss 文件时更新。

我才刚刚开始/学习如何使用 NPM，因此非常感谢任何帮助。在过去的 2 个小时里，我一直在学习教程和答案(包括 Using node-sass、Watch and Compile Sass in Five Quick Steps 和 Using node-sass to compile Sass files in an npm script)，但没有成功。

如何让我的 watch 和 build 正常工作？

更新

因此，这只是为将来寻找此内容的任何人提供的更新，我不了解脚本的工作原理，也没有意识到我的脚本没有相互并行运行。我以为 npm start 触发了我所有的脚本来运行，我没有意识到你必须调用所有这些脚本。我最终的 package.json 文件如下:

{
  "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 脚本并将我的 start args 更改为 npm-run-all --parallel browser-sync build- sass watch-sass 因为我不需要与我之前使用的旧 run-script-os args 的跨操作系统兼容性。我还将 -w (--watch) arg 放在浏览器同步行中，使创建的 .css 文件触发同步因为构建实际上替换了 .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"

希望这对你有用