(primary: (base: #488aff, contrast: #000)) isn't a valid CSS value

#1

My code:

$colors: (
  primary:    (base: #488aff, contrast:#000),
  secondary:  (base: #32db64, contrast:#000),
  danger:     (base: #f53d3d, contrast:#000),
  light:      (base: #f4f4f4, contrast:#000),
  dark:       (base: #222, contrast:#000),
  font:        (base: #fe5295, contrast:#000)
);

Error:

(primary: (base: #488aff, contrast: #000), secondary: (base: #32db64, contrast: #000), danger: (base: #f53d3d, contrast: #000), light: (base: #f4f4f4, contrast: #000), dark: (base: #222, contrast: #000), font: (base: #fe5295, contrast: #000)) isn't a valid CSS value.

Versions:


    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 6.4.0

local packages:

    @ionic/app-scripts : 3.1.4
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v6.9.2
    npm  : 5.5.1
    OS   : Windows 10

Any ideas?

1 Like
#2

Any recommendations on this @ionic? The theming documentation prescribes this method for theme colors, but it does not work on all values: e.g.,

Error: “Sass Error (base: #990000, contrast: #ffffff) isn’t a valid CSS value. src/theme/variables.scss“

$colors: (
primary: (base: #990000, contrast: #ffffff),
secondary: (base: #9v90000, contrast: #ffffff),
accent: (base: #990000, contrast: #ffffff),
danger: (base: #990000, contrast: #ffffff),
light: (base: #990000, contrast: #ffffff),
dark: (base: #990000, contrast: #ffffff)
);

WORKS:
$colors: (
primary: (base: #990000, contrast: #ffffff),
secondary: #990000,
accent: (base: #990000, contrast: #ffffff),
danger: #990000,
light: #990000,
dark: (base: #990000, contrast: #ffffff),
);

#3

Somehow an npm module was causing the issue, once It was removed, everything worked.

1 Like
#4

Hi. i got the same issue. Which module did you remove ?

#5

It has always worked for me, but yesterday I suddenly got this error too, does anyone have a solution?