So, I'm trying to 'whitelabelyze' my app allowing multiple options of designs for multiple clients. And inside my component's scss I need to load a '_variables.scss' that would be under this 'themes' folder, the structure is like this:
/
- themes
-- client-1
--- _variables.scss
-- client-2
--- _variables.scss
And inside my angular.json, I have this config:
"projects": {
"client-1": {
...
"architect": {
"build": {
...
"options": {
...
"stylePreprocessorOptions": {
"includePaths": [
"themes/client-1"
]
},
"styles": [
"src/styles.scss",
]
...
}
...
}
},
"client-2": {
...
"architect": {
"build": {
...
"options": {
...
"stylePreprocessorOptions": {
"includePaths": [
"themes/client-2"
]
},
"styles": [
"src/styles.scss",
]
...
}
...
}
}
}
According with the documentation, I'm doing it right, but my scss files are not loading the file 'variables' correctly. This is the import on my scss files:
@import "variables";
This is the error that happens:
ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
@import "variables";
^
File to import not found or unreadable: variables.
in /Users/erick/Projects/sample-project/src/styles.scss (line 2, column 1)
Any suggestions how to approach here?