2

Working environment: Angular with SASS/SCSS

I'm working on the Angular project and I keep getting this error. I was trying to add a custom theme palette to the SASS file. Any idea?

Failed to compile.

./src/styles.sass (../node_modules/css-loader/dist/cjs.js??ref--13-1!../node_modules/postcss-loader/src??embedded!../node_modules/resolve-url-loader??ref--13-3!../node_modules/sass-loader/dist/cjs.js??ref--13-4!./src/styles.sass)
Module build failed (from ../node_modules/sass-loader/dist/cjs.js):
SassError: expected ")".
  ╷
4 │ $md-acrpalette: (
  │                  ^
  ╵
  src/_global.sass 4:18  @import
  src/styles.sass 5:9    root stylesheet

And this is the SASS file

@import '~@angular/material/theming'
@include mat-core()

$md-acrpalette: (
  50 : #5e5e5e,
  100 : #9d9c9c,
  200 : #90be6d,
  300 : #f3f3f3,
  400 : #fff689,
  500 : #fbfbfb,
  600 : #418dcc,
  700 : #ef626c,
  800 : #8c86aa,
  900 : #767676,
  A100 : #ea8f56,
  A200 : #536dfe,
  A400 : #3d5afe,
  A700 : #304ffe,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #ffffff,
    400 : #ffffff,
    500 : #ffffff,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #ffffff,
    A400 : #ffffff,
    A700 : #ffffff,
  )
)
Ian Lee
  • 43
  • 1
  • 7

1 Answers1

4

Since you are using SASS and not SCSS, you need to write your map on a single line. Multiline declarations are not supported by SASS.

$md-acrpalette: (50: #5e5e5e, 100: #9d9c9c, 200: #90be6d, 300: #f3f3f3, ...))
Arkellys
  • 5,562
  • 2
  • 16
  • 40