I am working a react project and when I tried to use a mixin like @include it gave a piling error:

  ╷
7 │ ┌   @include mobile {
8 │ │     flex-direction: column;
9 │ └   }

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.

I have installed the packages and checked to see if it wasnt installed properly I still get this error what can I do?

code:

@import "../../global.scss";

.contact {
  background-color: white;
  display: flex;

  @include mobile {
    flex-direction: column;
  }

  .left {
    flex: 1;
    overflow: hidden;

    img {
      height: 100%;
    }
  }

I am working a react project and when I tried to use a mixin like @include it gave a piling error:

  ╷
7 │ ┌   @include mobile {
8 │ │     flex-direction: column;
9 │ └   }

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.

I have installed the packages and checked to see if it wasnt installed properly I still get this error what can I do?

code:

@import "../../global.scss";

.contact {
  background-color: white;
  display: flex;

  @include mobile {
    flex-direction: column;
  }

  .left {
    flex: 1;
    overflow: hidden;

    img {
      height: 100%;
    }
  }

• javascript
• css
• reactjs
• sass

• What does your file structure look like? – Arkellys Commented Jul 21, 2022 at 5:01

1 Answer 1

The mixin mobile is resolved only by name without the use of explicit imports. When using sass variable, mixin, or function declared in another file It is remended to explicitly import them to the current file like:

@use "../../global.scss" as s;

.contact{ 
 @include s.mobile {
   flex-direction: column;
 }
}

And also the Sass team discourages the use of the @import rule, Prefer the bination of @use and @forward rules instead. read the doc for more.