CODEWITHSUNDEEP
javascriptcssreactjssass
dave
dave

Reputation: 210

SASS throws an error Undefined Mixins: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined mixin

I am working a react project and when I tried to use a mixin like @include it gave a compiling 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%;
    }
  }

Upvotes: 6

Views: 7287

Answers (1)

ObinasBaba
ObinasBaba

Reputation: 530

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 recommended 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 combination of @use and @forward rules instead. read the doc for more.

Upvotes: 4

Related Questions