Sass error : Invalid CSS after "typography-config" angular 4.x

Question

I want to integrate my custom fonts for my angular 4.x project which are in assets folder. and I am using angular material. so for material I am setting custom typography in my styles.sass

Here's the code:

@import '~@angular/material/theming'

$used-fonts : 'Avenir', arial

$general-typography : mat-typography-config(
  $font-family: quote($used-fonts)
)

@include mat-core($general-typography)

The error which I got:

Invalid CSS after "...ography-config(": expected expression (e.g. 1px, bold), was "{"

giving me an error at :

any idea?

Have you tried to compile a minimal SCSS file that only contains the styles you have shown? The reason I ask is because the compiler might actually be complaining about an error that occurs earlier in the stylesheet. — Jonathan Nicol
– Jonathan Nicol, Commented Nov 15, 2017 at 10:33
It's not because you've left out semicolons is it? e.g. try adding semicolons at the end of each delaration: @import '~@angular/material/theming'; — Jonathan Nicol
– Jonathan Nicol, Commented Nov 15, 2017 at 11:04

Bipin · Accepted Answer · 2017-11-15 12:28:13Z

2

I suggest You should try within one line. it will consider it as nested value

$general-typography : mat-typography-config($font-family: quote($used-fonts))

answered Nov 15, 2017 at 12:28

Bipin

644 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonathan Nicol · Accepted Answer · 2017-11-15 11:15:52Z

-1

I suggest to try adding semicolons after each declaration. CSS requires a semicolon after each declaration except the last declaration in a rule (which is optional), and I think SASS follows suit.

@import '~@angular/material/theming';

$used-fonts : 'Avenir', arial;

$general-typography : mat-typography-config(
  $font-family: quote($used-fonts)
);

@include mat-core($general-typography);

answered Nov 15, 2017 at 11:15

Jonathan Nicol

3,3181 gold badge23 silver badges22 bronze badges

Collectives™ on Stack Overflow

Sass error : Invalid CSS after "typography-config" angular 4.x

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related