1

すべてのcssファイルを含む「stylesheets/application/index.css.scss」を使用したRail 4プロジェクトがあります。

 /*
 *= require jquery.ui.all
 *= require_tree ../shared
 *= require_tree ../design
 *= require_tree ../layout
 *= require_self
 *= require_tree .
 */

rails は、すべての css を最小化された 1 つだけにコンパイルします (製品内)。

@import "shared/header"多くのファイルをインポートする必要があります。

例: 「stylesheets/layout/main.css.scss」内

@import 'shared/header';

.header
{
  @extend .header_common_overview;
  [...]
}

しかし、私@import 'shared/header'は他のファイルにもいます。結果は次のとおりです。

Railsが一つのファイルでコンパイルすると、別のファイルにインポートするため、同じルール「.header_common_overview」が何度も存在します。

「インポート」命令をindex.css.scssに直接入れようとしましたが、うまくいきません。

では、ファイルを一度だけインポートして、他のすべてのファイルのコンテンツを呼び出すことができるようにするにはどうすればよいでしょうか?

4

2 に答える 2

1

まず、使用しないrequire_tree .でください。CSS ファイルのインクルード順序を制御できなくなり、カスケードの問題につながる可能性があります。実際には上書きされるべきではないスタイルが上書きされます。

requireあなたが説明したのと同様の理由で、メインの SASS ファイルでスプロケットの行を避けることを学びました。

  • =require_tree特にあちこちで使用する場合、重複につながる可能性があります
  • 変数/ミックスイン/など...スプロケットを介して含めることはできません（ただし、これについて間違っていることを証明したいと思います）

あなたindex.css.scssは単に置くことを考えるかもしれません

@import "vendor";
@import "shared";
@import "design";
@import "layout";

// Your main styling here.

@import "another_file";

これらの@import行は、他の sass ファイルに対応しています。shared.css.scssたとえば、次のようになります

/*
 *=require ./shared/header
 */

アイデアは

  1. アセットのクリーンな分離/編成を維持する
  2. 各アセットのインクルードを明示的に定義して、インクルードの順序を完全に制御
  3. @importSprockets ディレクティブの代わりにSASS を使用=requireして、変数、ミックスインなどを保持し、インクルード ファイル全体で使用できるようにします。
于 2014-11-17T14:53:19.097 に答える