Is there a way to export Sass variables and then import them as Angular Typescript variables?

After spending some time on this, I am facing a challenge with my application setup. Currently, I have defined variables in the scss file for setting colors and I want to import these variables into Typescript to send them to servers.

My Angular component contains a lot of font and color strings which I thought of moving into a scss file for design purposes. However, I am struggling to retrieve the colors from there.

I have noticed that some people have achieved something similar in Javascript, but I haven't been able to replicate it in Typescript yet.

What I aim to accomplish is:

Scss:

:export { myVariable:#ffffff; }

NGTypescript:

import {styles} from "./styles.scss";

and then perform an operation like:

onPostRequest(){ let color = styles.myVariable; ... }

However, when I reach the import line mentioned above, I encounter an error stating: Cannot find module './icon-picker.component.scss'.ts(2307)

I have come across similar examples in React where this functionality is implemented, but I am finding it challenging to adapt it to Angular. The concepts discussed in https://github.com/css-modules/css-modules/issues/86 caught my attention. Additionally, this walkthrough in Javascript also seems to be dealing with similar issues:

Answer №1

Have you experimented with defining colors as variables in your src/styles.scss file? You can link them up with CSS selectors and then reference these selectors in the component's HTML file.

For instance:

$primary-color: #333;
$secondary-color: #777;
.primary-color {
   color: $primary-color;
}
.secondary-color {
   color: $secondary-color;
}

Then, in your HTML component:

<p class="primary-color">Text with primary color</p>
<p class="secondary-color">Text with secondary color</p>

If you're interested, you can also convert the component's CSS to SCSS by simply renaming the *.css file and updating the StyleUrls reference in the component's TS file.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experimenting with TypeScript code using namespaces through jest (ts-jest) testing framework

Whenever I attempt to test TypeScript code: namespace MainNamespace { export class MainClass { public sum(a: number, b: number) : number { return a + b; } } } The test scenario is as follows: describe("main test", () ...

How to Implement Autocomplete Feature in Angular

CSS <div class="dropdown"> <input type="text" formControlName="itemName" (ngModelChange)="filterItems()" class="dropdown-input" (keyup)="onKeyPress($event)" (blur)="toggleDropdown(0)" (focus)="toggleDropdown(1)" placeholder="Search..." [ngCla ...

Tips for launching Nx serve in debug mode for Angular using VSCode

When running my Angular Nx project in the VSCode debugger, I encounter an issue with using yarn. yarn start successfully executes the nx serve command when run from a terminal. However, the same yarn start command fails when executed through VSCode debug ...

Reducing image file sizes in Ionic 3

I have been struggling to compress an image client-side using Ionic 3 for the past couple of days. I have experimented with: ng2-img-max - encountered an error when utilizing the blue-imp-canvas-to-blob canvas.toBlob() method (which is a dependency of ng2 ...

What is the correct way to extract a value from a keyvalue pair?

When dealing with an object that returns boolean "issues", I specify it as a string. If the value is true, I aim to show a checkmark; if false, I want to display a cross. <ul *ngFor="let filtered of reposFiltered | keyvalue"> <li *ngIf=& ...

"Encountering Issues with Angular's Modules and EntryComponents during Lazy Loading

Upon lazy loading an Angular module, I encountered an issue when trying to open my DatesModal that resulted in the following error: No component factory found for DatesModal. Have you included it in @NgModule.entryComponents? The declaration and entryCom ...

Can you explain the meaning of <T = MyType>?

While exploring a TypeScript file, I stumbled upon this interface declaration: interface SelectProps<T = SelectValue> extends AbstractSelectProps { /* ... */ } I've searched through the TypeScript handbook for <T = but couldn't find an ...

I encountered an issue where Angular 4, bootstrapped using the angular-seed repository from https://github.com/mgechev, fails to load when using

Hey there, I'm facing a strange issue with my project. I started off by bootstrapping it using a Boilerplate. Everything runs smoothly when I test it locally. However, for certain dev tasks, I need to switch to using HTTPS. To achieve this, I installe ...

Tips for integrating pdf.js worker in an Angular CLI project

When utilizing pdf.js directly in an Angular application for various PDF-related tasks, everything seems to be functioning properly. In order to utilize pdf.js, I imported it from pdfjs-dist and added it to my package.json file. Although the PDF works wi ...

ServiceStack request without the use of quotation marks in the JSON body

Why do quotes appear in my request body in Fiddler, but not in my ServiceStack request field? POST http://10.255.1.180:8087/testvariables/new/ HTTP/1.1 Host: 10.255.1.180:8087 Connection: keep-alive Content-Length: 162 Origin: http://10.255.1.180:8087 Use ...

Tips for setting up a personalized preview mode in Sanity Studio using Next.js

I am facing an issue displaying the preview mode because the URL must contain specific parameters such as "category" and "slug" (as shown in the image below). Here is the error URL with undefined parameters Therefore, I am unable to retrieve the paramete ...

I am facing an issue with toastr in Angular 8 as it is not functioning properly and showing me errors

I encountered an issue while trying to use Angular 8 toastr. The error message in the console is as follows: ngx-toastr.js:264 Uncaught TypeError: Object(...) is not a function at ngx-toastr.js:264 at Module../node_modules/ngx-toastr/fesm5/ngx-toastr.js ( ...

Troubleshooting issue with alignment in Material UI using Typescript

<Grid item xs={12} align="center"> is causing an issue for me No overload matches this call. Overload 1 of 2, '(props: { component: ElementType<any>; } & Partial<Record<Breakpoint, boolean | GridSize>> & { ...

No solution was found for implementing Airbnb TypeScript in React.js (Next.js) using ESLint

screenshot I encountered an issue where I couldn't locate the Airbnb typescript option in React JS (Next JS) within ESLint. Prior to this, I had installed Storybook and mistakenly clicked "yes" when prompted to migrate ESLint to Storybook. ...

Step-by-step guide on deploying Angular Universal

Exploring Angular universal and working on understanding deployment strategies. Check out the Github repository at https://github.com/angular/universal-starter This project includes Angular 2 Universal, TypeScript 2, and Webpack 2. After running the comm ...

Does Angular perform tree shaking on a service that is provided at the root level, as long as it is not explicitly injected into a component instance?

Suppose we implement a service similar to this as part of a library: @Injectable({ providedIn: 'root' }) export class ChartJSProvider { constructor() { Chart.register(...registerables); } } and our application makes use of the aforem ...

Typescript custom sorting feature

Imagine I have an array products= [{ "Name":'xyz', 'ID': 1 }, { "Name":'abc', 'ID': 5 }, { "Name":'def', 'ID': 3 } ] sortOrder=[3,1,5] If I run the following code: sortOrder.forEach((item) =&g ...

Using `justify-content: space-around` on a nested element within a class will not produce the desired spacing effect

This particular piece of code is functioning correctly: aside { /* Customize styles for the aside element */ flex: 0 0 40px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; background-color: #2800da; ...

Is it possible to execute an HTTP request using a functional resolver?

Previously, I used a class-based resolver where I could inject HttpClient in the constructor. However, this approach has now been deprecated - see the source for more information. Now, I am looking to implement an HTTP get request in a functional resolver ...

Enhanced Type Definitions for Decorated Classes in TypeScript

Check out this TypeScript Docs example showcasing decorators: function extendingClassDecorator<T extends {new(...args:any[]):{}}>(constructor:T) { return class extends constructor { newProperty = "new property"; hello = "override ...