I have node-sass installed with the options set according to the guidance provided in a response on Using node-sass watch option with npm run-script, however, I am facing issues with it not working as expected.
Below is the content of my package.json file which outlines my latest attempt:
{
"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"
}
}
I have attempted the following solutions:
"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"
I also tried:
"css": "node-sass styles/main.scss -o css/main.css",
"css:watch": "npm run css && node-sass styles/main.scss -wo css/main.css"
Furthermore, I attempted:
"scss": "node-sass --watch styles/main.scss -o css/main.css"
and (as suggested by sidthesloth):
"build-sass": "node-sass styles/main.scss css/main.css",
"watch-sass": "node-sass -w styles/main.scss css/main.css"
After running npm i, followed by npm start, browser-sync initiates and observes file changes. However, my css/main.css does not compile or update when I modify an .scss file.
I am relatively new to using NPM, so any assistance would be greatly appreciated. Despite going through various tutorials and answers, including Using node-sass, Watch and Compile Sass in Five Quick Steps, and Using node-sass to compile Sass files in an npm script) for the past couple of hours, I have been unable to resolve the issue.
What steps can I take to ensure that my watch and build commands function correctly?
Update
For anyone encountering a similar issue in the future, I realized that my scripts were not executing parallelly because I did not fully comprehend how scripts operate. I mistakenly assumed that running npm start would trigger all scripts simultaneously when, in fact, they needed to be individually called. Here's the revised version of my package.json file:
{
"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"
}
To address this issue, I introduced the npm-run-all script and modified the arguments in the start section to
npm-run-all --parallel browser-sync build-sass watch-sassrun-script-os arguments, I made these adjustments. Additionally, I included the -w (--watch) argument in the browser-sync line to prompt synchronization due to the replacement nature of the created .css files during the build process, rather than merely modifying them as mandated by browser-sync by default.