我们将css样式存储在Ember CLI Pods应用程序的何处



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

Ember CLI支持开箱即用的纯CSS。你可以添加你的css样式转换为app/styles/app.css,并将在资产/应用程序名称.css.

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

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

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

在将其应用于Pods应用程序时,是否需要特别考虑?

您并不是唯一一个在处理可怕的全局CSS问题的人,这些问题使应用程序的开发变得笨拙。

幸运的是,Ember 2.0即将推出一个解决方案,该解决方案将于今年夏天推出。但是,如果你觉得可以使用这个功能,或者只是想看看我所说的Ember.js.核心成员关于Ember组件CSS的内容,你现在就可以利用它了

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

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

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

更新:在Ember的未来版本中,Pods将被弃用,取而代之的是Ember核心团队对用于管理项目资源的模块统一系统的新调整。您可以在此处阅读更多信息:https://github.com/emberjs/rfcs/blob/master/text/0143-module-unification.md

我们开发的附加组件可以让您将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

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

注释需要:ember-cliscss

通过这篇文章:敏捷设计宣言。你不需要将所有的样式表插入一个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的模块来在路由或组件pods中生成样式表。然后,您需要将@import声明添加到app.scss文件中生成的文件中。

相关内容

  • 没有找到相关文章

最新更新