I am currently working on a project where my main entry point is structure.scss, and each platform has its own second entry point. Here is the folder structure:
scss/
|
|-- components/ # Modular Component Files
| |-- login.scss # Structure file for Login Module
|
|-- platforms/
| |-- globals/
| |-- components/
| |-- login.scss
| |-- global-imports.scss
| |-- base.scss
| |-- platform1.scss # Entrypoint for Platform 1
| |-- platform2.scss # Entrypoint for Platform 2
| |-- platform3.scss # Entrypoint for Platform 3
|
`-- structure.scss # Primary Entrypoint for all Platforms
Here are my Npm Scripts:
"scripts": {
"platform": "node-sass --watch --recursive --output-style 'compressed' src/scss/platforms/ -o public_html/inc/assets/css/platforms",
"structure": "node-sass --watch --recursive --output-style 'compressed' src/scss/style.scss public_html/inc/assets/css/style.css",
"scss": "npm run platform & npm run structure"
},
I encounter an issue where when I make changes to a file, it tries to compile that file as the entrypoint, resulting in console errors due to missing variables. To resolve this, I have to make unnecessary changes to the correct file every time.
Does anyone have a solution for this problem?
Another issue I face is the inability to overwrite default mixin vars in platforms > globals > components > login.scss from any platform.scss...