#How to format angular material @Inclued override in sass?

11 messages · Page 1 of 1 (latest)

tiny dust
#

Hi, I'd like to format a @include for angular material like this in my .SASS files

@include mat.form-field-overrides ((
outlined-error-label-text-color: #E15241,
filled-container-color: #E0E2EB
))

but that throws an error of:

expected ")".
╷
9 │ @include mat.form-field-overrides ((

How can I format this so I avoid having one long line with overrides

fleet flame
#

better if you post the whole file

tiny dust
# fleet flame better if you post the whole file

Below is the whole file. This is a syntax issue. If I make the @Include all in one line then it works perfectly. But I want it on multiple lines

@use '@angular/material' as mat

@include mat.form-field-overrides ((
outlined-error-label-text-color: #E15241,
filled-container-color: #E0E2EB
))

fleet flame
#

if that's the whole file, how can the error point to line 9?

icy shell
# 
@use '@angular/material' as mat;

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  @include mat.form-field-overrides((
    filled-caret-color: orange,
    filled-focus-active-indicator-color: red,
  ));
}

If you want to include it from file _custom-form-field.scss into another scss (like styles.sccs), you do as:

// _custom-form-field.scss
@use "@angular/material" as mat;

@mixin form-field-custom-theme() {
  @include mat.form-field-overrides((
    filled-caret-color: orange,
    filled-focus-active-indicator-color: red,
  ));
}

// styles.scss
@use '@angular/material' as mat;
@use './custom-form-field' as formfield;

:root {
  @include formfield.form-field-custom-theme()
}
#

Assuming you are using Angular material v19

tiny dust
#

I am using Angular material v19 too

icy shell
#

I believe you have format it like as follows:

@mixin form-field-custom-theme
  @include mat.form-field-overrides(
    filled-caret-color: orange
    filled-focus-active-indicator-color: red
  )