Cannot include mixin in v4

Ionic Framework ionic-v3
1

Hi,
I am running Ionic v4 Alpha 7 and when i try to use mixing i.e @include rotate(180deg) it gives error:
No mixin named rotate

1 Like
2

Hey @dotnetdreamer. Can you please tell me what do you exactly want to do to an object? Do you just want to rotate an element to 180 degrees?

3

hi @umerf6455, no i need to have access to mixins. I can rotate element via css but i need to access mixins like this @include rotate() or @include ltr() etc…which is working in v3

4

Sorry bro. I’ve also worked with mixins in v3 and they work fine there. Have no idea of v4. Sorry.

5

No worries still thankful for your time. Its weired though…i can see those mixins in @ionic folder inside node_modules…

6

Hope you get help brother :confused:

1 Like
7

For those who needs to do the same thing, i added the themes folder in angular cli as explain here. I added the files like so:

...
"styles": [
...
],
"stylePreprocessorOptions": {
"includePaths": [
     "node_modules/@ionic/angular/dist/themes"
]
}
...

then i imported the mixins file like so:

@import "ionic.mixins";
//here it works now
.test {
    @include ltr() {
        text-align: left;
    }
}
1 Like
8

Hello, did someone else solve this? I have the same problem :frowning:

9

In Ionic 4.11.0, I added "stylePreprocessorOptions" in my angular.json to get the transform mixin working:

            "stylePreprocessorOptions": {
              "includePaths": [
                "node_modules/@ionic/core/dist/collection/themes"
              ]
            },
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],

Then in global.scss, I added:

@import "ionic.mixins";
1 Like
10

After I add stylePreprocessorOptions. It gives me this error:

[ng] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] @at-root #{add-root-selector($root, “[dir=rtl]”)} {
[ng] ^
[ng] Invalid CSS after “…tor(.pull-left,”: expected selector, was ‘"[dir=rtl]")’
[ng] in /Users/saoud/ionic4/node_modules/@ionic/core/dist/collection/themes/ionic.mixins.scss (line 162, column 41)

1 Like
11

I get this error too. Did you find a solution for this error?