css - 基础网格系统不生效

Question

为什么基础网格系统不影响我的 div:

  render: function(){
    var {todos,showCompleted,searchText} = this.state;
    var filteredTodos = TodoAPI.filterTodos(todos,showCompleted,searchText);
    return (
      <div>
        <h1 className="page-title">Todo App</h1>

        <div className="row">
          <div className="column small-centered small-5 medium-6 large-5">
            <div className="container">
              <TodoSearch onSearch = {this.handleSearch} />
              <TodoList todos ={filteredTodos} onToggle ={this.handleToggle}/>
              <AddTodo onAddTodo ={this.handleAddTodo}/>
            </div>
         </div>
       </div>
      </div>
    );
  }

---

我使用 Firebug 来调试样式: 找不到:

.large-5 {
    width: 33.3333%;
}

---

该元素的 repo 是 here

Answer 1

你应该将基础导入为

@import '~foundation-sites/scss/foundation';

因为您的 webpack.config 中已经包含了 includedPath

经过一段时间的调试，我发现问题出在foundation-everything mixin 默认包含另一种网格样式

@mixin foundation-everything(
  $flex: true, //You can test this by modifying it directly in your node_modules, set it to false
  $prototype: false
) {
  @if $flex {
    $global-flexbox: true !global;
  }

  @include foundation-global-styles;
  @if not $flex {
    @include foundation-grid;
  }
  @else {
    @if $xy-grid {
      @include foundation-xy-grid-classes;
    }
    @else {
      @include foundation-flex-grid;
    }
  }
  //more scss here
)

这就是为什么你的类没有应用预期样式的原因，因为根据 foundation-everything 混合生成了不同的类(特别是生成了 XY 网格而不是一个如您所料，foundation-grid)。

根据您的应用，您可以采用不同的方式来解决这个问题。

1) 您可以在元素中包含所需的确切基础样式集。 (我的建议)

2) 以某种方式改变混合(我不认为动态导入是一件事？(https://github.com/sass/sass/issues/279)

可能还有其他选项，例如:生成一次 css 并将其直接包含在您的应用程序中，或者使用 react-foundation package .同样，这取决于您的需求。