How to @import CSS file in Angular?

Question

I have a file that I need to use in another css file.

For that I have added this to angular.json file:

   "styles": ["src/assets/css/theme.scss"],

Then I try to use it in a css file:

@import "theme.scss";

Angular can not find this path.

Answer 1

If you want to point to a css/scss file within a component, you can add a shortcut to your styles folder in your angular.json in the options node like so :

        "my-app": {
            "root": "...",
            "sourceRoot": "...src",
            "projectType": "application",
            "architect": {

                "build": {
                    [...]
                    "options": {
                        [...]
                        "stylePreprocessorOptions": {
                          "includePaths": [
                            "projects/my-app/src/styles" // path to your styles folder
                          ]
                        }
                    }
                    
                },

            }
        },

Then, whenever you use @import "...";, it will start from the css folder, so you can use @import "theme.scss";