javascriptreactjselasticsearchsasselasticui

I have a problem when following the docs to customize the theme on react using elastic ui

When I want to custom the theme, this fails show up. Does anyone know how to fix that?

My project Github link is here.

Failed to compile.

./src/themes/light/index.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/themes/light/index.scss)
SassError: no mixin named euiScreenReaderOnly
        on line 3 of node_modules/@elastic/eui/src/components/accessibility/_screen_reader.scss
        from line 1 of node_modules/@elastic/eui/src/components/accessibility/_index.scss
        from line 4 of node_modules/@elastic/eui/src/components/index.scss
        from line 7 of /Users/austin/Documents/sideproject/eui-layout/src/themes/light/index.scss
>>   @include euiScreenReaderOnly;

   -----------^
Solution

  • the order need right and don't into functions

    Wrong @import '../../../node_modules/@elastic/eui/src/global_styling/functions/index';

    Right @import '../../../node_modules/@elastic/eui/src/global_styling/index.scss';

    @import './color.scss';

$euiSize: 14px;
// Global styling
@import '../../../node_modules/@elastic/eui/src/global_styling/index.scss';

@import '../../../node_modules/@elastic/eui/src/components/index.scss'