我的组件的Emberjs特定的SCSS文件

Question

我们刚刚开始使用Emberjs，我想创建一个新的自定义组件，它在上是完整的。这意味着它有自己的js文件、模板文件和样式。当我使用ember-cli生成一个新组件时，我已经得到了前两个。最后一个是样式，我还没有找到如何创建一个CSS/SCSS文件，该文件只有在加载给定组件时才加载。有这样的事情吗？

Answer 1

ember组件css似乎正是您想要的。您还可以查看ember-css模块。

使用Ember组件css，您将能够执行以下操作：

app/my-component/styles.css
& {  // ampersand refers to the component itself (parent selector)
  padding: 2px;
}
.urgent {
  color: red;
}

这将生成：

.my-component-a34fba {
  padding: 2px;
}
.my-component-a34fba .urgent {
  color: red;
}

这就是我认为你想要的，对吧？

另外，您可以使用预处理器：

// app/styles/app.scss
@import "pod-styles"; or
// app/styles/app.less
@import "pod-styles"; or
// app/styles/app.styl
@import 'pod-styles'