Skip to content

[Angular] Sass/Scss import/use clean up

Georg Höller
Georg Höller
1 min read
[Angular] Sass/Scss import/use clean up
Photo by AltumCode / Unsplash

Here is a quick hint for importing scss files in another scss file in angular. Normally you have to write the full file path into the import statement:

--import
@import 'apps/blog-hub-landing/src/styles/core/colors';
@import 'apps/blog-hub-landing/src/styles/core/variables';

--use
@use 'apps/blog-hub-landing/src/styles/core/colors';
@use 'apps/blog-hub-landing/src/styles/core/variables';

It's much cleaner if you add your style folders to the "stylePreprocessorOptions" object! You will find it in your angular.json under the options tag from your project's build declaration.
To fix my example above I would add something like this:

"stylePreprocessorOptions": {
    "includePaths": ["apps/blog-hub-landing/src/styles"]
},

Now you can change your imports to:

--import
@import "core/colors";
@import "core/variables";

--use
@use "core/colors";
@use "core/variables";

Angular Docs Reference: https://angular.io/guide/workspace-config#style-preprocessor-options

Angular

Comments


Related Posts

Members Public

[Angular | RxJS] BehaviorSubject with custom states

Whenever I call an api, often my frontend has to go through some different visualization steps. Imagine you have some kind of search input and a list which displays the results but you want to show an loading indicator, an error hint and something different when the result is empty.

[Angular | RxJS] BehaviorSubject with custom states
Members Public

[Angular] Dynamic App Config and Translations in a Submodule

When I'm setting up a new angular application, I always start with translation support and an external app config json loader. You should never start a new app without an internationalization (i18n) system - even if you only support one language! We are going to use the package @ngx-translate/core.

[Angular] Dynamic App Config and Translations in a Submodule
Members Public

[Capacitorjs | Angular] Back Swipe Support for iOS and Android

Recently I recognized that capacitorjs apps does not have a native back swipe support. Little bit weird I thought but the solution is quite simple! iOS - Native To enable the iOS back swipe we need to write a capacitor plugin. I tried it without a plugin but inside the

[Capacitorjs | Angular] Back Swipe Support for iOS and Android