I'm interested in setting up a folder structure like this:
assets
- scss
- folder
file.scss
anotherfile.scss
anotherfile.scss
anotherfile.scss
- anotherfolder
file.scss
anotherfile.scss
anotherfile.scss
anotherfile.scss
- css
main.css
... and compile it all into one main.css. Currently, I'm using npm run scss + node-sass as shown in my package.json file:
{
"name": "test",
"version": "1.0.0",
"description": " ",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "node-sass --watch assets/sass/app.scss assets/css/app.css"
},
"license": "ISC",
"private": true,
"dependencies": {
"npm-sass": "^2.2.1"
}
}
Currently, when I make changes in the subfolders, the main.css is updated along with additional CSS files like css>folder>anotherfile.css. This causes errors because the compiler doesn't recognize variables from vars.scss when I modify scss>folder>anotherfile.scss.
I want to avoid this issue. Is there a way to monitor the entire folder structure but only compile main.scss to main.css when there are changes? Thank you for the help!