我的组件的 Emberjs 特定 SCSS 文件

Question

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

Answer 1

ember-components-css 似乎完全符合您的要求。你也可以看看 ember-css-modules.

使用 Ember-components-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'

Emberjs specific SCSS file for my component