Simplifying SCSS File Imports in Angular

How to Simplify SCSS File Imports in Angular

Hey, we all have ever seen something like this in our SCSS files:

@import '../../../../../my-css-file';

But that’s not really sexy, right? Thanks to the power of the pre-processor, we can now just code:

@import 'my-css-file';

How? We need to update our angular.json like this:

{
    ...
    "projects": {
        "<project_name>": {
            ...
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        ...
                        "stylePreprocessorOptions": {
                            "includePaths": [<path_to_my_scss_folder>]
                        }
                        ...
                    }
                }
                ...
            }
        }
    }
    ...
}

Thanks for reading.

Learn More

• Install Jest for Angular
• How to Undo a GIT Commit
• Angular for everyone: All about it

Comments

[Dios Vo]

If your Angular version is greater than 12, you can use @use instead.