使用 NPM node-sass 观看 SASS 文件

Posted 2023-03-06

【中文标题】使用 NPM node-sass 观看 SASS 文件

【英文标题】：Watching SASS files with NPM node-sass

【发布时间】：2019-04-06 11:21:14

【问题描述】：

我已经安装了 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 参数更改为npm-run-all --parallel browser-sync build-sass watch-sass，因为我不需要与以前的旧run-script-os 参数进行跨操作系统兼容性。我还将 -w (--watch) arg 放在 browser-sync 行中，以导致创建的 .css 文件触发同步，因为构建实际上替换了 .css 文件，而不是按照要求“更改”它默认浏览器同步。

【问题讨论】：

如果您要链接您已经“尝试过”的外部教程，那么我也可能会帮助您实际展示教程向您展示的您实现的内容，以及遵循这些说明究竟有哪些不起作用。您的问题中似乎没有任何内容表明您遵循了您所引用的任何说明。因此，也许可以更详细地了解他们每个人的问题。这样一来，没有人会通过简单地重复您认为已经行不通的事情来浪费他们或您的时间。

@NeilLunn 正如我的问题顶部所述，我已将选项设置为第一个链接的底部响应，但它似乎没有做任何事情。与我发布的所有其他链接相同。我已经尝试了所有这些并且浏览器同步开始了，但是 node-sass 的东西似乎没有做任何事情。

需要明确的是，您被要求“更具体”地说明什么不起作用以及您实际尝试了什么。我在这里看不到任何东西，要求“完整教程”的问题往往会因为过于宽泛而被关闭。因此，这只是一个“公平警告”，您的问题中有些事情需要注意。

@NeilLunn 谢谢我添加了一些我尝试过的和没有发生的例子

【参考方案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"

希望这对你有用

【讨论】：

谢谢我已经尝试过了，但它似乎将我的浏览器同步置于刷新循环中，并且我的 main.css 文件仍未编译。有任何想法吗？我已经用我迄今为止尝试过的方法更新了我的问题。

有没有机会我可以看到你的整个package.json 文件，看看你是如何设置的？

"scripts": "start": "npm run build && npm run watch", "build": "npm run build-sass", "serve": "nodemon dist/server.js", "watch": "concurrently -k -p \"[name]\" -n \"Sass,Node\" -c \"yellow.bold,cyan.bold,green.bold\" \"npm run watch-sass\" \"npm run serve\"", "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"