stylePreprocessorOptions includePaths is not importing my scss files

Question

I have started using Angular multi-projects workspace. So I created a style folder which contains all my shared scss files.

In the angular.json file, for each project I have added the following in the architect/build/options section:

    "stylePreprocessorOptions": {
          "includePaths": [
            "styles"
          ]
        }

but when I run ng build my-project or ng serve my-project the main.scss file under styles folder is not included.

This file basically imports all the scss files that are in the subfolders under `styles´ like this

 @import "base/base";
 @import "base/typography";
 @import "base/helpers";
 @import "base/fonts"; 

What am I doing wrong ?

Answer 1

I have been facing this issue in Angular14. Earlier I had been using a relative path for importing global SCSS files (using '~' sign). But latest version of Angular stopped using this sign and also it started using DartSCSS. Till now, it seems that Angular14 has not been supporting stylePreprocessorOptions in its angular.json file. github thread has also no clue on this issue. So, as of now I have removed stylePreprocessorOptions from angular.json and added path as "@import './src/styles/global-mixins This resolves two issues-

1. I don't need to use ~ sign anymore.
2. No need to add a relative path like ../../../styles/global-mixins

In future, if I get some solution to this problem I will update here.