A simple setup to simplify your Style File Imports into your Angular app

Hi guys, how are you?!

Have you ever wanted to simplify importing style files into your app, component, or whatever?!

Today I would like to share a simple, but maybe not well known configuration of angular.json and with that we can simplify the way of importing the style files!

For example, to import the theme-tokens.scss file in your home.component.ts you should write:

@import "src/resources/sass/frontend/theme-tokens.scss";

Soo long, right?! Imagine writing this whole line in several components.

Buuut relaaax, the awesome Angular and with Sass give us includePaths feature for component and global styles, and with that we can set up extra base path for your app and no longer write long imports lines!

So, let's see how to make this!!!

✅ Implementing the configuration:

In your angular.json file, include the stylePreprocessorOptions with the includePaths property and your extra path, as below:

{
  ...
  "projects": {
    "your-app": {
      "architect": {
        ...
        "build": {
          ...
          "stylePreprocessorOptions": {
            "includePaths": [
              "src/resources/sass"
            ]
          },
          ...
        },
        ...
      },
      ...
    }
  }
 }
}

Annd now you can just import your style file more easily and simpler in your component.scss or something else, take a look:

⛔️ Old Way:
@import "src/resources/sass/frontend/theme-tokens.scss";

🔥 New Way:
@import "frontend/theme-tokens.scss";

Awesome, right?!

A simple configuration and with that we can improve our development time and simplify and standardize our structure!

If you want, you can see the Angular documentation here!

That's all guys, I hope you like it and if any questions, suggestions or other topics, please comment!

See you later ✌🏼