css - $theme does not exist in your theme config - Stack Overflow

Im getting this $theme does not exist in your theme config issue in that first line that seemingly came out of nowhere. This code snippet is in app\node_modules@angular\material\input_input-theme.scss. I was tinkering around trying to change some default material input styling but I am not sure what caused this. How do I fix this?

@mixin theme($theme) {
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-input') {
    @if inspection.get-theme-version($theme) == 1 {
      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
    }
    @else {
      @include base($theme);
      @if inspection.theme-has($theme, color) {
        @include color($theme);
      }
      @if inspection.theme-has($theme, density) {
        @include density($theme);
      }
      @if inspection.theme-has($theme, typography) {
        @include typography($theme);
      }
    }
  }
}

Im getting this $theme does not exist in your theme config issue in that first line that seemingly came out of nowhere. This code snippet is in app\node_modules@angular\material\input_input-theme.scss. I was tinkering around trying to change some default material input styling but I am not sure what caused this. How do I fix this?

@mixin theme($theme) {
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-input') {
    @if inspection.get-theme-version($theme) == 1 {
      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
    }
    @else {
      @include base($theme);
      @if inspection.theme-has($theme, color) {
        @include color($theme);
      }
      @if inspection.theme-has($theme, density) {
        @include density($theme);
      }
      @if inspection.theme-has($theme, typography) {
        @include typography($theme);
      }
    }
  }
}

• css
• angular
• sass
• angular-material

Share Improve this question Follow asked Feb 4 at 9:34 Mohamed ElkasimiMohamed Elkasimi 3111 bronze badge 1

• please replicate the issue on stackblitz on what you are trying to customize (Use angular material website working examples), steps to replicate and expected output, currently there is a lack of data in the question – Naren Murali Commented Feb 4 at 9:37

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

This is caused by the TailwindCSS linter misinterpreting your mixin as a call to the Tailwind theme() function. If you are using VS Code, this issue shows how you can disable the error by modifying your settings:

{
  "tailwindCSS.lint.invalidConfigPath": "ignore"
}