我已经安装了node-sass,并按照在npm run-script中使用node-sass watch选项的底部响应中的方式设置了选项,但是,它似乎对我不起作用。
这是我的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个小时里,我都碰到了教程和答案(包括在五个快速步骤中使用node-sass,Watch和Compass Sass以及在npm脚本中使用node-sass编译Sass文件),但运气不佳。
任何人都可以为我指明正确的方向,以使我工作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
文件,而不是默认情况下按浏览器同步的要求“更改”该文件。
这是我使用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"
希望这对你有用
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句