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

时间:2015-02-04 02:55:17

标签: ember.js ember-cli ember-cli-pods

我正在阅读http://www.ember-cli.com/#stylesheets,其中说:

  

Ember CLI支持开箱即用的纯CSS。你可以添加你的CSS   app / styles / app.css的样式,它将在   资产/应用name.css。

我应该遵循文件夹结构约定吗?类似的东西:

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

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

将此应用到Pods应用程序时是否应该考虑特殊因素?

3 个答案:

答案 0 :(得分:4)

在处理可怕的全球CSS问题时,你并不孤单,这些问题使得应用程序变得笨拙。

幸运的是,对于你来说,Ember 2.0的解决方案即将到来,今年夏天将会有所下降。您现在可以利用此功能,但是如果您对此感到满意,或者只是想通过Ember.js的核心成员查看关于Ember Component CSS的内容。

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

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

大多数人似乎都将css文件分解为以组织目的命名的文件夹。

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

答案 1 :(得分: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功能并生成样式:

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

答案 2 :(得分:1)

我没有Ember Guru,但是我想在Ember社区采用有关样式表的一些有用的约定和工具时,我们接受基于组件的未来。

注意要求:ember-cliscss

通过这篇文章:An Agile Design Manifesto。 您没有必要将所有样式表插入到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,以便在路径或组件窗格中生成样式表。然后,您需要将@import声明添加到app.scss文件中生成的文件中。