Question

假设我有一个组件，包含一个用于行为的JavaScript文件，一个HTML模板文件和一个用于外观的SCSS文件。

我们使用 Webpack 在应用程序的主要JavaScript中加载组件的JavaScript（例如通过require('./path/to/the-component.js')）。我们使用组件的JavaScript加载其SCSS文件（通过require('./the-component.scss')）。

组件的SCSS文件包含一个具有默认值的变量（例如最小高度：$min-height: 400px）。

如果我不喜欢组件的所有用法中的400px：如何覆盖此类变量（例如在应用程序的SCSS文件*中）以将$min-height调整为{ {1}}？当然，由于违反分离关注原则并不是一个好主意，因此该组件不应该对其周围目录的组织方式做出任何假设。

到目前为止，我没有找到解决此问题的方法。但我确信有人做过。

*）以及我应该如何（在哪里）加载这样的文件（通常，我通过app.js加载app.scss）

Answer 1

我认为通过scss实现你想要的东西是不可能的，因为组件的所有实例最终都会有相同的样式（除非你使用像Tyler Biscoe建议的多个类）。最后，您将拥有一个组件的静态css文件，所有实例都将共享它。

考虑重构你的scss以取出scss中的$min-height，使其成为组件的参数并使用内联样式来应用它。对于React，它看起来像这样：

import './MyComponent.scss';

class MyComponent extends Component {
  render() {
    return (
      const divStyle = {
        minHeight: this.props.minHeight
      }
      <div style={divStyle}></div>
    );
  }
}

然后你可以添加任何宽度的组件：

class App extends Component {
  render() {
    return (
      <MyComponent minHeight="300px"/>
      <MyComponent minHeight="400px"/>
      <MyComponent minHeight="500px"/>
    );
  }
}

这样，您可以从MyComponent提升min-height参数，让更高的组件指定它。

<强>更新

我猜你可以从mycomponent.scss解除$min-height并将其设置为父级。假设您必须为$min-height css类设置.my-component，在父级的scss文件中，您可以执行以下操作：

.large-component > .my-component {
  min-height: $large-min-height;
}

.small-component > .my-component {
  min-height: $small-min-height;
}

但同样，这不允许您将参数传递给组件，只根据组件的父容器设置样式。

Answer 2

mixin会帮助你吗？比如说

@mixin set-min-height($min-height) {
  min-height: $min-height;
}

无论您在组件中的哪个位置，您都要设置高度或您刚才调用的任何属性

.app__view { @include set-min-height(400px); }

.component__view { @include set-min-height(500px); }

我相信这种方法比覆盖变量更好，因为无论如何都要将属性设置为特定于组件的规则。

Answer 3

我的想法是添加第二个最小高度变量。例如$min-height-2，并为其分配不同的值。然后将其应用于您将有选择地分配给您希望具有不同最小高度的元素的不同类名。

$min-height: 400px;
$min-height-2: 500px;

.some-element {
  min-height: $min-height;

  &.larger-element {
    min-height: $min-height-2;
  }

}

HTML：

<div class="some-element"> This element has min-height 400px</div>
<div class="some-element larger-element">This element has min-height 500px</div>

覆盖通过JavaScript文件加载的SCSS文件变量的可行方法是什么？

3 个答案: