Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Gaëtan Redin
Gaëtan Redin

Posted on • Originally published atMedium 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 modeExit 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 modeExit 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 modeExit fullscreen mode

Thanks for reading.

Learn More

Top comments(1)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
diosvo profile image
Dios Vo
The best never rest
  • Location
    Viet Name
  • Education
    HCMC Open University '21
  • Work
    Front End Dev
  • Joined
• Edited on• Edited

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

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Angular developer who love to share. Still seeking quality code and tips
  • Location
    Nantes, France
  • Work
    Lead dev on Angular project
  • Joined

More fromGaëtan Redin

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp