6

我正在阅读http://www.ember-cli.com/#stylesheets它说：

Ember CLI 支持开箱即用的纯 CSS。您可以将您的 css 样式添加到 app/styles/app.css，它将在 assets/application-name.css 中提供。

我应该遵循文件夹结构约定吗？就像是：

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

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

在将其应用于 Pods 应用程序时，我应该考虑什么特别的考虑因素吗？

4

3 回答 3

4

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

幸运的是，Ember 2.0 即将推出解决方案，该解决方案将于今年夏天发布。您现在可以利用此功能，但是如果您愿意，或者只是想看看 Ember.js 的核心成员关于 Ember 组件 CSS 的内容。

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

当然，这不是您问题的完整解决方案，因为它仅适用于组件，但由于组件是 Ember 工作流程的重要组成部分，现在我认为您会发现将 CSS/SASS 与它们一起存放在 pod 中会很方便文件夹结构。

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

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

于 2015-04-16T01:16:22.207 回答
4

我们开发了附加组件，可让您将 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
于 2015-04-20T06:51:29.280 回答
1

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

注意要求：ember-cli和scss。

通过这篇文章：敏捷设计宣言。您无需将所有样式表插入到 pod 结构中即可获得好处，只要您...

“按路由和组件组织 SCSS”

对于组件，文章建议您希望保持全局选择：

> 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以允许您在路由或组件 pod 中生成样式表。然后，您需要将@import声明添加到文件中生成的文件中app.scss。

于 2015-04-15T20:37:15.530 回答