DEV Community

Gaëtan Redin
Gaëtan Redin

Posted on • Originally published at Medium on

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';
Enter fullscreen mode Exit fullscreen mode

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

@import 'my-css-file';
Enter fullscreen mode Exit fullscreen mode

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>]
                        }
                        ...
                    }
                }
                ...
            }
        }
    }
    ...
}
Enter fullscreen mode Exit fullscreen mode

Thanks for reading.

Learn More

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (1)

Collapse
 
diosvo profile image
Dios Vo • Edited

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

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay