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

[ngrok | Angular] External Access to your Local Test Environment

Sometimes you have to test your local hosted API or website with multiple different devices. They may be on the same network and you can open your local ports in some way to get it working but most of the time it's a messy solution. Tech Stack * Angular * ASP.NET

[ngrok | Angular] External Access to your Local Test Environment
Members Public

[Angular | Capacitor] Interact With Your Native Calendar

Recently I had do to implement a simple task: When the user presses the 'save appointment' button, the app should add this event to the native calendar. My first thought was saving an .ical file and open it, till i recognized that this isn't the most user friendly way. After

[Angular | Capacitor] Interact With Your Native Calendar
Members Public

[Angular] Native iOS and Android App - Capacitor

In this blog post we will go through the initial process of how to convert an existing angular project into a cross-platform project. Our focus is on iOS and Android. In addition to this, I show you how to speed up developing and especially testing the app. Setup * Code Editor

[Angular] Native iOS and Android App - Capacitor