Question

我正在尝试将样式应用于此组件：

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;
  }
}

Koala（从SCSS到CSS编译器）抱怨@Include是否要求在scss局部变量中未定义的mixin，但是在正确时没有抱怨，这使我相信scss应该可以在浏览器中加载，但没有如前所述，同一类具有在浏览器中加载的其他scss（边距样式）。这可能是什么原因？谢谢！

SCSS Mixin未加载到React子组件中

0 个答案: