[SOLVED] Sass include and Ionic2 RC.0

Ionic Framework ionic-v3
1

How do I include a scss file from another scss in Ionic2 RC.0?

In beta 11, I had a scss with following mixin declaration in it:

@mixin nexus5X() {
  @media (min-width: 412px) and (max-width: 412px) {
    @content;
  }
}

which I used to import in app.core.scss, like following:

@import "include/media-queries.scss";

now when I run my app migrated to Ionic2 RC.0 I always have got the error that that mixin isn’t found in my scss files where I use it.

 no mixin named nexus5X

Any clue?

2

I added custom css to app.component.scss in app folder and it is picked automatically

1 Like
3

Thx. It turns out my global.scss wasn’t loaded, that’s why I had to add in separate scss the include too.

I fixed the include of global.scss and my include were good again aka I don’t have anymore to specify them in each file.

Futhermore, if you do an include in a specific.scss file, the path to the included should be relative to the source of the scss file you will include.

4

where did you include import for global.scss?

5

Two “solutions” (don’t know if it’s the right way to do it but)

  1. In variable.scss add at the end of the file

    @import “global”;

  2. Or, the one I finally use. Create a new scss file app.component.scss next to your app.component.ts file and place your code there. Don’t use global.scss anymore

6

I had the first hack, but it gets overridden by theme scss, so it was not working well.
The second one seems good though, thank you!