Step-by-step guide on importing CSS into TypeScript

I have a global CSS file where I've defined all the colors. I attempted to import that value into TypeScript but it didn't work. This is my latest attempt:

get sideWindowStyle(): any {
    switch (this.windowStyle) {
      case 'classicStyle': {
        return {
          '@import' : 'src/styles-library/colors-variables.scss',
          'background-color': '$primary-lightest-color'
        };
      }
      case 'lightStyle': {
        return {
          'background-color': '#ffffff'
        };
      }
      default: {
        return {
          'background-color': '#f1f9fe'
        };
      }
    }
  }

Whether with or without importing, it still hasn't worked.

angulartypescriptsass

Answer №1

When you are in the process of building, remember to transpile it into CSS and then connect that file in your index.html page:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="dist/colors-variables.css">
</head>
<body>
</body>
</html>

Answer №2

When using sass variables, they will be compiled during the build and not accessible at run time. In such cases, CSS variables can be utilized instead 😃

style.scss

:root {
  --primary-lightest-color: brown;
}

sideWindowStyle 

get sideWindowStyle(): any {
    switch (this.windowStyle) {
      case 'classicStyle': {
        return {
          'background-color': 'var(--primary-lightest-color);'
        };
      }
      case 'lightStyle': {
        return {
          'background-color': '#ffffff'
        };
      }
      default: {
        return {
          'background-color': '#f1f9fe'
        };
      }
    }
  }

CSS variables MDN 🎯

Answer №3

To achieve the desired style when window.style is a class in the template, you can utilize the Host property:

:host(.classicStyle) { 'background-color': '$primary-lightest-color' }
:host(.lightStyle) { 'background-color': '#ffffff' }
background-color: '#f1f9fe'

This code snippet will automatically update the background-color property when either of these two classes are present on the container of your element.

If window.style is a TypeScript object, then based on its value, change the host element's class to classicStyle or lightStyle, and the provided host code will take effect.

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

Why does the method of type assigning vary between actual and generic types?

There are no errors in the code shown below: type C = {b: string}; class Class { data: C; constructor(data: C) { this.data = data; } test() { const hack: C & {a?: any} = this.data; //no error } } However, when a g ...

typescript

Subject fails to subscribe to the change

There are two components in my project that share a common service. shared.service.ts // ..... skipping top level codes private pickAnalysisForBubble = new Subject<any>(); analysisForBubble$ = this.pickAnalysisForBubble.asObservable(); mapTo ...

angularangular2-servicesangular-cli

Using ngFor and ngModel: What is the best way to add values to the beginning of the array I am looping through?

I am facing an issue with my array of elements in which users can edit, add, and delete complete array elements. Everything works smoothly until I try to add a value to the beginning of the array using the unshift method. Below is a test that showcases th ...

javascriptangularangular-forms

The primary route module is automatically loaded alongside all other modules

I have configured my lazy loaded Home module to have an empty path. However, the issue I am facing is that whenever I try to load different modules such as login using its URL like /new/auth, the home module also gets loaded along with it. const routes: R ...

angulartypescriptlazy-loadingangular-router

Changing {number, Observable<string>} to Observable<number, string> is a necessary transformation to be made

Is there a way to convert an array of objects with the following structure: { id: number, data: Observable<string> } into an array of objects with this structure: Observable<{id: number, data: string}> using only RxJS operators? ...

typescriptrxjs

Tips for incorporating Legacy pre-configured ESLint settings into your Angular 15 project and upgrading to Angular 16

As I was in the process of upgrading my app from version 15 to version 16, I came across some linting errors. It turns out that certain plugins have been removed from angular-eslint starting from version 16. The solution provided is to manually re-add thos ...

angulareslintangular15angular16

Having Trouble with React, TypeScript, and MUI Tabs? Dealing with Overload Errors?

Currently, I'm in the process of building a component using MUI Tabs. Here's a snippet of my code: <Box> <Tabs value={value} onChange={handleChange} variant='fullWidth'> {RoomTabs.map((tab, index) => ( ...

reactjstypescriptmaterial-uitabs

TypeScript/Javascript - Error: The specified function is not callable

After recently delving into TypeScript, I found myself encountering an error in my code for a wheel mini-game on my app. The specific error being displayed in the console is: this.easeOut is not a function The relevant portion of the code causing the iss ...

javascriptangulartypescript

Guide on creating rsa key pair on the client side with angular2

Is there a way to generate an 'rsa' key-pair on the client-side using angular2? I am looking to create a private/public key pair and store the private key in a database while using the public key on the client side. How can this be achieved? I c ...

javascriptangularclientrsakey-generator

Display captions on react-player videos using an .srt file

Currently, I am working on a React/Typescript project with Next.js. A key feature of this project is a modal that utilizes 'react-player' to display videos. While the video and modal are functioning as intended, I am looking to incorporate capti ...

reactjstypescriptreact-playersrt

Error: Serialization of circular structure to JSON not possible in Next.js

I am currently working on creating an API in Next.js to add data into a MySQL database. The issue I am facing is related to a circular reference, but pinpointing it has proven to be challenging. It's worth mentioning that Axios is also being utilized ...

node.jstypescriptaxiosnext.jstypeerror

Typescript: Removing signatures with a filter

I am encountering a TypeScript error stating that .filter has no signatures. I'm unsure of how to resolve this issue. interface IDevice { deviceId: string; deviceName?: string; } const joinRoom = ({ userId, deviceId, deviceName }: IRoomParams ...

typescript

Error: Attempting to access an undefined property ('call') on Next.js is causing a TypeError

Exploring the realms of Next.js and Typescript for a new project! My goal is to utilize next.js with typescript and tailwind CSS by simply entering this command: npx create-next-app -e with-tailwindcss my-project Smooth sailing until I hit a snag trying t ...

javascriptreactjstypescriptnext.js

Using promises in TypeScript index signature

Can you help me find the correct index signature for this particular class? class MyClass { [index: string]: Promise<void> | Promise<MyType>; // not working public async methodOne (): Promise<void> { ... } public async methodTwo () ...

typescriptindex-signature

How to vertically align radio buttons with varying label lengths using Angular and Bootstrap 4?

Is there a way to properly align radio buttons with variable length labels? When each label has a different length, the radio buttons appear misaligned. How can this be fixed? <div class="row"> <div class="form-check form-check-inline" *ngFor="l ...

htmlangularbootstrap-4

Learn how to implement React Redux using React Hooks and correctly use the useDispatch function while ensuring type-checking

I'm curious about the implementation of Redux with Typescript in a React App. I have set up type-checking on Reducer and I'm using useTypedSelector from react-redux. The only issue I have is with loose type-checking inside the case statements of ...

reactjstypescriptreduxreact-redux

Guide to making a Material Design Radial effect animation

I am looking to create a unique toolbar effect by following the material design radial reaction choreography guideline. https://i.stack.imgur.com/6oB8r.gif I want to achieve this using an angular 2 transition, but I need some guidance on how to implement ...

cssanimationangulartypescript

Update the component to display the latest information from the Bryntum grid table

In the Vue component, I have integrated a Bryntum grid table along with a bar chart. Clicking on one of the bars in the chart should update the data displayed in the Bryntum grid table. However, I've encountered difficulty in reloading the entire Bryn ...

typescriptvue.jsvue-componentbryntum-grid

Issue with offline functionality in Angular 4 project

I am currently working on an E-commerce Project utilizing Angular 4, Bootstrap, and font-awesome. Additionally, I have incorporated .scss files, angular-cli, and have custom-built a slider component. All libraries, images, and necessary files have been ins ...

angularwebresponsive-designe-commercefrontend

Guide to incorporating third-party libraries in Angular

Greetings, I have a common question regarding Angular and utilizing third-party libraries. As someone who does not frequently work with Typescript/Frontends, I am encountering an issue with Angular. Specifically, I am attempting to incorporate the node-htm ...

node.jsangulartypescript