CODEWITHSUNDEEP
angularangular8
user12704000
user12704000

Reputation:

How to use sass-loader in Angular?

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);

Upvotes: 3

Views: 10413

Answers (1)

Ling Vu
Ling Vu

Reputation: 5181

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';

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';

Upvotes: 2

Related Questions