SCSS Mixin не загружается в подкомпонент React - PullRequest
Новая
       19

SCSS Mixin не загружается в подкомпонент React

0 голосов
/ 15 декабря 2018

Я пытаюсь применить стили к этому компоненту: 

import React from "react";

export class HeaderItem extends React.Component {
  render() {
    return <li className="navLiBtn">{this.props.name}</li>;
  }
}

Который является подкомпонентом этого компонента: 

import React from "react";
import serotoninImg from "../../Img/1200px-Serotonin-2D-skeletal.svg.png";
import "../styles/header.css";
import { HeaderItem } from "../header/HeaderItem";

export class Header extends React.Component {
  render() {
    return (
      <header className="App-header">
        <nav>
          <img src={serotoninImg} className="App-logo" alt="Serotonin logo" />
          <ul className="NavMenu">
            <HeaderItem name="Supplements" />
            <HeaderItem name="Foods" />
            <HeaderItem name="Anxiolytics & Stress Reducers" />
            <HeaderItem name="Nootropics" />
          </ul>
        </nav>
      </header>
    );
  }
}

У меня этот scss работает нормально с Koalaсоставление: 

@import "../../partials/base";
@import "../../partials/border";
@import "../../partials/box-shadow";
@import "../../partials/box";
@import "../../partials/color";
@import "../../partials/dropdown";
@import "../../partials/footer";
@import "../../partials/header";
@import "../../partials/text";

.App-header {
  height: 100px;
  background: $netflix-red;
  & .NavMenu {
    display: flex;
    flex-direction: row;
    float: right;
    & .navLiBtn {
      margin: 30px 40px 0 40px;
      @include firstMixin;
    }
  }
}

Странная вещь (для меня) в том, что стили полей работают, но не mixin : 

@import "base";
@import "header";
@import "box-shadow";
@import "color";
@import "border";
@import "dropdown";
@import "footer";
@import "text";

@mixin firstMixin {
  .navLiBtn {
    @include standard-1px-border;
    padding: 10px;
    background: $netflix-white;
  }
}

Коала (компилятор SCSS в CSS) жалуется, если @Include запрашивает миксины, которые не определены в партиалах scss, но не жалуется, когда это правильно, что заставляет меня поверить, что scss должен быть загружен в браузер, но это не так, как отмечалось ранее, тот же класс имеет другой scss, который загружается в браузер (стили полей).Что может быть причиной этого?Спасибо!

...