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

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 Guru ではありませんが、Ember コミュニティがコンポーネント ベースの未来を受け入れる際にスタイルシートに関して採用している、いくつかの役立つ規則とツールについて説明したいと思います。

注:ember-cliとscss.

この投稿から: 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 を持つテンプレートが 1 回だけ表示され、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ます。

于 2015-04-15T20:37:15.530 に答える