SCSS path is not working with mixin or variables in app.scss (main.scss)

user_19188332 0
Viewed 101

I have a problem with the SCSS path. I have a folder structure. You can see it first image. The problem is that I imported all scss in app.scss. Files of components work, but pages of components don't read mixin and variables. First of all, I thought that It's a syntax error but I could not find it.

My app.scss

@import "./abstracts/variables.scss";
@import "./abstracts/mixins.scss";

@import "./components/Header.module.scss";
@import "./components/Footer.module.scss";

@import "./pages/Home.module.scss";

If I write $mainColor in Header.module.scss, there is no problem and the app works. But in pages folder, I have to write @import and I don't want to write it.

Home.module.scss

@import "../abstracts/variables.scss";
@import "../abstracts/mixins.scss";

.main-section {
  .main-section-context {
    @include flex-box(center, center);
    
  }
}

If I deleted import , the screen gives

SassError: Undefined mixin.
   ╷
13 │     @include flex-box(center, center);
   │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  styles\pages\Home.module.scss 13:5  root stylesheet
scss-mixins sass path css
1 Answers

Ok, I am spitballing here because I don't entirely understand your project, but make sure the order of your imports is correct. for example, if you import your variables after home, the home will not read it. it looks like thats not the problem specifically

user_174226300
Related