Simplifying SCSS File Imports in Angular

#csspreprocessors #import #angular #scss

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

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →