stylePreprocessorOptions not working on @Angular/cli 7

Question

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?

Answer 1

I had the same problem when running tests, the solution was to add the same style stylePreprocessorOptions to the test configuration in angular.json as well as the build configuration

Answer 2

I've found the problem.

I was loading themes/client-X instead of src/themes/client-X inside the angular.json.