How to use sass-loader in Angular?

Question

How to turn on sass-loader in Angular?

I try to use @import "theme.scss"; inside*.scss` files.

But I get message;

File to import not found or unreadable: theme.scss.

I dont use webpack, only tsconfig and angular.jon

Where file theme.scss contains variables:

$border-radius: 10px;
$main: rgb(20, 100, 192);

Answer 1

Import .scss file into other .scss files

You can specify the .scss inside other .scss files using the relative path of your file inside the assets path.

Your default assets path should be

"assets": [
              "src/favicon.ico",
              "src/assets"
            ]

which is defined in the angular.json file.

Example:

• You have an app.component.scss
• Your theme.scss file is in ./src/assets/theme/theme.scss

Then you would import it inside app.component.scss like:

@import '../assets/theme/theme.scss';

Specify the style preprocessor option to shorten the import

If you want to shorten the path like you described, you just add the path to the stylePreprocessorOptions in the angular.json file:

"architect": {
        "build": {
          ...
          "options": {
            ...
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/assets/style/theme"
              ]
            },
         },
         "test": {
           ...
           "options": {
             ...
             "stylePreprocessorOptions": {
               "includePaths": [
                 "./src/assets/style/theme"
               ]
             }
           }
         }
}

Then you should be able to include your file like @import 'theme.scss';

• For more insights read this: https://github.com/angular/angular-cli/wiki/stories-global-styles
• Official documentation: https://angular.io/guide/workspace-config
• Source that I used: How to short path to file in Angular?

Update after description changed

I suppose you set the wrong relative path. Therefore you need to set the stylePreprocessorOptions like that:

"includePaths": ["./src/lib"]

in build and test

After you set this, you can put in any theme file there and like:

./src/lib/theme.scss and import it like @import 'theme.scss';