Ember.js 如何在EngE-CLI项目中自定义基础SCSS样式

我有一个ember cli项目，其中包括css框架。我应该提到的是，我对使用SCSS是完全陌生的，所以请容忍我

我的

app/styles/app.scss

文件如下所示：

@import 'vendor/foundation/scss/normalize';
@import 'vendor/foundation/scss/foundation';

现在我想覆盖一些样式；我的问题是在哪里以及如何做到这一点？在

bower\u components/foundation

中修改代码是没有意义的，但我不清楚如何做

正确的方法是什么

非常感谢,

---

米迦勒

< P>如果您想简单地覆盖颜色等，可以在导入基础SCS之前将变量赋值给变量（在基础文档中解释）。我是这样做的：

app.sass

@import "_variables.scss";
@import "bower_components/foundation/scss/normalize";
@import "bower_components/foundation/scss/foundation";

$table-bg: transparent;
$table-even-row-bg: transparent;
$table-border-style: none;
$table-head-font-color: inherit;
$table-row-font-color: inherit;
$table-head-padding: rem-calc( 5 );
$table-row-padding: rem-calc( 5 );
// etc

\u variables.scss

@import "_variables.scss";
@import "bower_components/foundation/scss/normalize";
@import "bower_components/foundation/scss/foundation";

$table-bg: transparent;
$table-even-row-bg: transparent;
$table-border-style: none;
$table-head-font-color: inherit;
$table-row-font-color: inherit;
$table-head-padding: rem-calc( 5 );
$table-row-padding: rem-calc( 5 );
// etc

如果你需要更多的自定义，你当然可以定义自己的类，以在导入后覆盖基础。您可以使用SASS mixin和import语句将其现有css（以及您自己的）导入到您自己的定义中：

.full-row {
   @include grid-row(); // brings in a mixin
   // more styles
}

.option-panel {
  @include someclass; // brings in the styles defined for class someclass
  // etc
}

---

您看过ember cli foundation ember插件了吗。它会为你加载基础CSS。然后，您可以将新样式添加到app.scss文件中<代码>npm安装ember cli foundation--保存开发人员我认为你应该为此获得一枚奖章。