CODEWITHSUNDEEP
javascriptreactjssass
YelTab
YelTab

Reputation: 67

Using React and SCSS, I can't get any @mixins to work

I'm currently developing a web app whose front end is using React and SCSS. I have a global .scss file containing --vars and @mixins. I import this file at the top component of the application to have access to all of my vars and mixins. What's weird is that my vars are working but I am getting a SassError: no mixin named ____ when trying to @include the mixins. Any idea why?

Structure:

/
  App.jsx
  css/
    Global.scss
  components/
    css/
      SupplierCard.scss
    SupplierCard.jsx

App.jsx imports Global.scss and renders a SupplierCard. Supplier card imports SupplierCard.scss for specific styles.

Global.scss:

@mixin card-primary {
  background-color: white;
  border: 1px solid var(--border);
}
@mixin card-secondary {
  background-color: white;
  border: 1px solid var(--border-light);
}

SupplierCard.scss

.supplierCard {
  @include card-secondary;
}

Is there something wrong with my syntax? I even tried importing Global.scss in the SupplierCard.jsx file right before SupplierCard.scss. I have no idea why it can't find the mixins.

Upvotes: 0

Views: 1043

Answers (1)

AUHReem03
AUHReem03

Reputation: 31

In SupplierCard.scss add the following at the top of the file in order to import mixin from another file

@import '../../css/Global.scss'

Upvotes: 1

Related Questions