ember.js - ember-cli：如何在 pod 中放置 CSS

Question

我正在使用 ember-cli 的 pod 结构按资源对 JS 和模板进行分组，这是一个巨大的改进。资源相关逻辑的最后一个痕迹是 CSS (SCSS) 文件，它们已经按照类似 pod 的线条分解，但仍然停留在app/styles.

我的想法是将 CSS 文件移动到每个 pod 中，名称为style.css. 我的问题是如何指示 SASS（通过@import）指令和/或 Broccoli，在 pod 中查找 SCSS 文件（可能有几个层次）并将它们编译成appname .css。

Answer 1

Erik Bryn 实际上刚刚在 EmberConf 上宣布了他的ember-cli 插件，它就是这样做的。不幸的是，它还不支持 CSS 预处理器，所以在他的插件进一步发展之前，你将不得不使用非 pod 组织样式的方式......

Answer 2

我们创建了一个不错的插件ember-cli-sass-pods，它使用ember-cli-sass（将自动安装）并允许您生成样式 scss 文件并将其放入您的 pods 目录。

例如：

app/login
app/login/route.js
app/login/template.hbs
app/login/style.scss

或一个组件：

app/components/login-box
app/components/login-box/component.js
app/components/login-box/template.hbs
app/components/login-box/style.scss

赶紧跑

ember g 样式 [路径] -p

享受！