1

I have an Angular project and created a custom theme with material theme creator. From the creator, I got 6 CSS files. In one of them, there are a lot of CSS variables created and in another it creates classes that use those CSS variables. Here is one of those classes:

.title-medium{
  font-family: var(--md-sys-typescale-title-medium-font-family-name);
  font-style: var(--md-sys-typescale-title-medium-font-family-style);
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  font-size: var(--md-sys-typescale-title-medium-font-size);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  line-height: var(--md-sys-typescale-title-medium-height);
  text-transform: var(--md-sys-typescale-title-medium-text-transform);
  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
}

Another one just imports all the other 5 CSS files in the correct order. I just imported that one in my styles.css.

@import url(app/material-styles/theme.css);

I then use one of the imported classes in one of my components.

<div class="name-container">
  <h2 class="title-medium">{{ line1 }}</h2>
  <h1>{{ line2 }}</h1>
  <h3>{{ line3 }}</h3>
</div>

Sadly, this does not work at all. I also checked with the inspection tool and the style is not listed. Which is why I think it wasn't overridden.

I made my own class in the styles.css to check that the styles.css is integrated correctly. This worked fine.

.title-medium{
    color: red;
}

I then tried to use one of the variables in the components CSS which worked fine.

h2{
  font-size: var(--md-sys-typescale-title-medium-font-size);
}

I can also see all the registered CSS variables in the chrome inspection tool so this seems to work just fine.

The problem just occurs with the imported classes in the .HTML files. Any ideas what I am missing?

Edit:

The file structure is:

Frontend
|  angular.json (in here the styles.css is referenced)
|
|-src
   |  styles.css (in here I @import the theme.css)
   |  index.html
   |  main.ts
   |
   |-app
      |  app.component.css (empty)
      |  app.component.html
      |  app.component.ts
      |  app.module.ts
      |  
      |-app-welcome
         |  app-welcome.component.css
         |  app-welcome.component.html (uses class title-medium)
         |  app-welcome.component.ts
         | 
      |-material-styles
         |  theme.css (generated by the material design creator. imports all the other .css in this folder)
         |  theme.dark.css
         |  theme.light.css
         |  colors.module.css
         |  tokens.css (defines all the css variables)
         |  typography.module.css (defines class title-medium)

I did also adjust the theme.css according to the solution by @Flo. Before it did also use the url() version. It now looks like this:

@import "tokens.css";
@import "colors.module.css";
@import "typography.module.css";
@import "theme.light.css" (prefers-color-scheme: light);
@import "theme.dark.css" (prefers-color-scheme: dark);
Sidereus
  • 200
  • 3
  • 13

1 Answers1

2

Do the import without the url method like this:

@import "./app/material-styles/theme.css";

Then, whenever you use @import "...";, it will start from the css folder, so you can use @import "theme.scss";

The url part wanna be a complete http url as example.

Here is a Stackblitz example.

Update

We have solved it... The problem (or the second problem) was the name of one css file; it includes .module.css. And with this name webpack/Angular or anything has problems, but xxx.module.css is typically a css module.

Flo
  • 2,232
  • 2
  • 11
  • 18
  • Sadly this did not change anything. Still the same behavior. – Sidereus Feb 19 '23 at 21:44
  • I work every day with this. Show me your folder structure. Where is the css which import another css – Flo Feb 19 '23 at 21:53
  • I edited the question and provided the file structure. Thank you for your effort. – Sidereus Feb 20 '23 at 09:47
  • You wanna import the tokens.css INSIDE the styles.css, correctly? Then you need go set the path: @import "./app/material-styles/tokens.css" relative from the file you wanna use `@import` – Flo Feb 20 '23 at 09:49
  • In the styles.css I import the theme.css. And the theme.css imports the tokens.css. I tried to adjust the path in the theme.css as you suggested, but then angular doesn't compile anymore because it can not resolve the path anymore. Now I also tried to skip the extra step with the theme.css and import everything in the styles.css with adjusted paths. but that does not work either. – Sidereus Feb 20 '23 at 09:58
  • I have updated my answer with a Stackblitz example – Flo Feb 20 '23 at 10:02
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/251999/discussion-between-sidereus-and-flo). – Sidereus Feb 20 '23 at 10:19