Trouble consuming Eui with create-react-app (saas-loader)

[GautierT]

Hi.
First of all, thank for this very good library !

I was previously importing the css file (import "@elastic/eui/dist/eui_theme_amsterdam_light.css") in index.js of my cra app and it was working fine.

But now i'm trying to use the collapsible nav (https://elastic.github.io/eui/#/navigation/collapsible-nav - Full patern). And for that it seems that i need to add this @include euiHeaderAffordForFixed($euiHeaderHeightCompensation * 2); to change top position of the side nav bar when their is a header.

So i switch to this (https://github.com/elastic/eui/blob/master/wiki/consuming.md#using-our-sass-variables-on-top-of-compiled-css)
like this :

// mytheme.scss
// $euiColorPrimary: #7B61FF;

@import "@elastic/eui/src/themes/eui/eui_colors_light.scss";
@import "@elastic/eui/src/themes/eui/eui_globals.scss";

@import "@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss";
@import "@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals.scss";

@include euiHeaderAffordForFixed($euiHeaderHeightCompensation * 2);

But then i have an error :

./src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/index.scss)
SassError: Base-level rules cannot contain the parent-selector-referencing character '&'.
        on line 6 of node_modules/@elastic/eui/src/global_styling/mixins/_header.scss, in mixin `euiHeaderAffordForFixed`
        from line 14 of /Users/me/Documents/Projets/proj/src/index.scss
>>   &.euiBody--headerIsFixed {

   --^

What did i do wrong ?

Thanks a lot.

[j-m]

I believe you need to put the mixin in body like:

body {
  @include euiHeaderAffordForFixed;
}

[kshitij86]

I think @j-m is right. @GautierT you need to use mixin's inside a selector, like this:

From W3 Schools, for more info

//Sass @include mixin Syntax:
selector {
  @include mixin-name;
}

See if placing the @import inside a selector resolves the issue?

[miukimiu]

Hi @GautierT,

You can take a look at how we're doing this in our gatsby starter:

https://github.com/elastic/gatsby-eui-starter/blob/e4ab2c39a76e449cc8fa61a05d5868512fe645a0/src/global_styling/index.scss#L1-L10

But how @j-m and @kshitij86 mentioned you need to use the mixin inside a selector.