Help migrating from Ionic 3 to 4 for variables.css and scss file

Ionic Framework
1

Hi,

I’ve almost completed the migration from Ionic 3 to version 4, but I have a problem with variables.css and one scss file.

Basically I have this in variables.css version 3:

// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.

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

and this, in a scss file:

  .accordion-list {
    background: color($colors, light);
  }

The syntax above is no longer supported by Ionic 4 and I tried to do something similar according to new specifications in the new code.

I defined this in Ionic 4:

:root {
  --ion-color-primary: #488aff;
  --ion-color-primary-rgb: 72, 138, 255;
  --ion-color-primary-contrast: #000000;
  --ion-color-primary-contrast-rgb: 0, 0, 0;
  --ion-color-primary-shade: #3f79e0;
  --ion-color-primary-tint: #5a96ff;

  --ion-color-secondary: #32db64;
  --ion-color-secondary-rgb: 50, 219, 100;
  --ion-color-secondary-contrast: #000000;
  --ion-color-secondary-contrast-rgb: 0, 0, 0;
  --ion-color-secondary-shade: #2cc158;
  --ion-color-secondary-tint: #47df74;

  --ion-color-tertiary: #5260ff;
  --ion-color-tertiary-rgb: 82, 96, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #4854e0;
  --ion-color-tertiary-tint: #6370ff;

  --ion-color-success: #2dd36f;
  --ion-color-success-rgb: 45, 211, 111;
  --ion-color-success-contrast: #000000;
  --ion-color-success-contrast-rgb: 0, 0, 0;
  --ion-color-success-shade: #28ba62;
  --ion-color-success-tint: #42d77d;

  --ion-color-warning: #ffc409;
  --ion-color-warning-rgb: 255, 196, 9;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0ac08;
  --ion-color-warning-tint: #ffca22;

  --ion-color-danger: #f53d3d;
  --ion-color-danger-rgb: 245, 61, 61;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #d83636;
  --ion-color-danger-tint: #f65050;

  --ion-color-dark: #222222;
  --ion-color-dark-rgb: 34, 34, 34;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e1e1e;
  --ion-color-dark-tint: #383838;

  --ion-color-medium: #92949c;
  --ion-color-medium-rgb: 146, 148, 156;
  --ion-color-medium-contrast: #000000;
  --ion-color-medium-contrast-rgb: 0, 0, 0;
  --ion-color-medium-shade: #808289;
  --ion-color-medium-tint: #9d9fa6;

  --ion-color-light: #f4f4f4;
  --ion-color-light-rgb: 244, 244, 244;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d7d7;
  --ion-color-light-tint: #f5f5f5;

  --ion-font-family: 'Montserrat Regular';
}

And tried to change the .scss content to this:

  .accordion-list {
    background: color(var(--ion-color-primary), light);
  }

Nothing changes, unfortunately and this makes my screen scrambled!

I’ve read many documents and posts here, like this, but I did not understand how to fix this up.

Can you help me please?

2

I recommend you migrate v3 into v5.

3

Yes, that’s the next step I will do. For some reason I’ve found I had to migrate to 4 and then to 5.
So you say, go directly to 5. Good.

Thanks for the hint.

4

Hi @baifeng,
migration to Ionic v5 is completed.
The issue is still there.

[ng] ✔ Browser application bundle generation complete.
[ng] Initial Chunk Files | Names |      Size
[ng] main.js             | main  | 229.27 kB
[ng] 60 unchanged chunks
[ng] Build at: 2021-09-19T16:31:18.433Z - Hash: c50a96ffbad73c434bce - Time: 588ms
[ng] ./src/app/home/home.page.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
[ng] SassError: Undefined variable: "$colors".
[ng]         on line 13 of src/app/home/home.page.scss
[ng] >>   background: color($colors, light);
[ng]    --------------------^

Can you help?

5

Hey, you need to change it like this.

background: var(–ion-color-primary, #488aff)

1 Like