我们在哪里存储 css 样式和 Ember CLI Pods 应用程序？

Question

我正在阅读 http://www.ember-cli.com/#stylesheets 上面写着：

Ember CLI supports plain CSS out of the box. You can add your css styles to app/styles/app.css and it will be served at assets/application-name.css.

是否有我应该遵循的文件夹结构约定？类似于：

app/styles/application.css
app/styles/users/index.css
app/styles/users/new.css
etc

或者是将所有自定义 css 存储在 app.css 中的约定？

在将此应用到 Pods 应用程序时，我应该考虑哪些特殊事项？

Answer 1

我不是 Ember 大师，但是我想加入一些有用的约定和工具，Ember 社区在我们拥抱基于组件的未来时正在采用有关样式表的一些有用的约定和工具。

注意需要：ember-cli和scss.

通过这个 post：An Agile Design Manifesto。您不需要将所有样式表插入到 pod 结构中来获得好处，只要您...

"Organize SCSS by Route & Component"

对于组件，本文建议您将选择保持在全局范围内：

> stylesheets/components/_flash_messages.scss

/* 
Base Styling for the Flash Messages component - how it will appear globally.
*/
.flash-messages {
  background-color: $default-flash-color;
}

对于资源，您可以利用 ID 选择器和 Ember 的约定来确保具有给定 ID 的模板只出现一次，并且您的 SCSS 代码可能如下所示：

> stylesheets/routes/_posts.scss

/* 
Global Styling for the "Posts" resource.  
It's an ID because it's guaranteed to only ever appear on the page once.
Thanks Ember!
*/
#posts {
  @import "show";
  @import "new";
  @import "edit";
}

您可以使用它来覆盖全局样式并创建一个人造 CSS 范围。

导入的演出路线样式可以是：

> stylesheets/routes/posts/_show.scss

/* 
Styling here is specifically for this on the "Show" route of the "Posts" resource.  
Most likely, it's empty, but it's a good place to override the global appearance of components, and ensure those changes are contained to this route only. 
*/

#posts-show {
  .flash-messages {
    background-color: $posts-show-flash-color;
  }
}

根据这些建议，您可以使用如下模块：ember-cli-sass-pods 允许您在路由或组件中生成样式表 pods。然后，您需要将 @import 声明添加到 app.scss 文件中生成的文件中。

Answer 2

在应对可怕的全球性 CSS 问题的斗争中，您并不孤单，这些问题使开发应用程序变得笨拙。

幸运的是，您即将在 Ember 2.0 中找到解决方案，该版本将于今年夏天发布。您现在可以利用此功能，但是如果您愿意，或者只是想看看我在谈论 [=27= 的核心成员关于 Ember 组件 CSS 的内容].

https://www.npmjs.com/package/ember-component-css

这当然不是您问题的完整解决方案，因为它只是针对组件，但由于组件现在是 Ember 工作流程的重要组成部分，我认为您会发现隐藏 CSS/SASS 在 pods 文件夹结构中会很方便。

出于组织目的，大多数人似乎将 css 文件分解到以其路线命名的文件夹中。

更新：Pods 将在 Ember 的未来版本中弃用，以支持 Ember 核心团队对用于管理项目资源的模块统一系统。您可以在这里阅读更多内容：https://github.com/emberjs/rfcs/blob/master/text/0143-module-unification.md

Answer 3

我们开发的附加组件可让您将 sass 文件放入 pods 目录！

试一试：

https://github.com/DudaDev/ember-cli-sass-pods

假设您有联系人路由和联系人框组件。

生成常规路由和组件：

ember g route contacts -p
ember g component contact-box -p

然后，使用ember-cli-sass-pods power并生成样式：

ember g style contacts -p
ember g style components/contact-box -p

你很棒的文件结构是：

app/

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

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

我们在哪里存储 css 样式和 Ember CLI Pods 应用程序？

Where do we store css styles in and Ember CLI Pods app?

ember.js

ember-cli

ember-cli-pods