0

Locomotive CMS の貨車で Bourbon を動作させる方法はありますか?

ワゴンのGemfileにバーボンときちんとした宝石を追加しましたが、バンドルをインストールしてサーバーを起動した後、次のようになりました：

 File to import not found or unreadable: bourbon.
 Load paths:
 /Users/alex/workspace/locomotive-test/public/stylesheets
 /Users/alex/.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
 /Users/alex/.rbenv/versions/1.9.3-p392/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
 Compass::SpriteImporter
4

1 に答える 1

2

Locomotive を Bourbon (または Susy または任意のアドオン SASS gem) で動作させるには、2 段階の問題があることがわかりました。最初に、リソースを Wagon gemfile に正しくロードする必要があります。次に、リソースをすべての依存ファイルに追加して、Engine に ed する@importときに正しくコンパイルする必要があります。push

Bourbon を Wagon (1.5.1) に正しくインポートするには、サンプル パターンに従って、Bourbon を :misc グループの gemfile に追加します。

group :misc do
  # Add your extra gems here
  gem 'bourbon', require: 'bourbon'
end

次に、実行するだけで$ bundle install問題なく動作するはずです。public/stylesheets フォルダーに実際の .css ファイルを保存する必要がないことがわかりました。$ bourbon install私の Wagon インスタンスには宝石で十分でした。

ただし、サイトをエンジンにプッシュするのは難しい場合があります。Wagon は SASS ファイルを任意の順序でコンパイルしますpush(参照: LocomotiveCMS Google Group )。@importしたがって、すべての呼び出しを 1 つのメイン sass ファイルにまとめ、最上位の application.css ファイルでそのファイルのみを参照するというDRY Rails のベスト プラクティスは、ここでは機能しません。

./public/stylesheets
  -application.css #requires self and main
  -main.scss #imports all other stylesheets, normally where we'd @import 'bourbon'
  /other_stylesheets
    -variables.scss
    etc. etc.

pushでは、Wagon は@import他のすべてのリソースよりも先に main.scss が Bourbonであることを理解できません。そのため、通常は「undefined mixin...」で失敗します。

それを解決するために、変数.scss、mixins.scssなどをフォルダー（たとえば./public/stylesheets/base/）に配置し、すべてのページ固有のスタイルシート（posts.scssなど）でこれらのリソースに対して@importを呼び出します.)。さらに、Bourbon、Neat、Susy などの mixin が@importその gem 参照とmixinsと変数を呼び出さなければならないスタイルシートは、依存する各シートで繰り返す必要があります。

./public/stylesheets
  -application.css # requires self and main
  -main.scss # imports all other stylesheets, normally where we'd @import 'bourbon';
  /other_stylesheets
    -variables.scss # might @import 'font-awesome';
    -mixins.scss # @import 'bourbon'; @import 'variables'; 
    etc. etc.

残念ながら、これは DRY コーディングではありません。実際、排除できる肥大化と冗長性はおそらくたくさんあります。これまでのところ、pushこれらの gem を使用して Wagon サイトをエンジンに接続するために見つけた最も信頼できる方法です。そうは言っても、各ページの各リソースを識別するのではなく、簡単な修正を探している場合は、@importBourbon、Neat、what-have-you、および@importその import.scss リソースだけを呼び出す import.scss スタイルシートを作成できます。他のすべてのシートに。

最後の落とし穴 (有名な最後の言葉!) は、ドキュメントにもかかわらず、エンジンが .scss または .sass ファイルを受け入れないことです。プリプロセッサ スタイルシートは、先頭に .css を追加する必要があります。

main.scss => main.css.scss

そうしないと、エンジンは「アップロードが許可されていません...」というエラーを返します。

それが役立つことを願っています!

アップデート：

これを投稿してから数週間後、Locomotive と他の Rails アプリで Sass の問題が発生した理由は、application.css ファイルで古いスプロケット構文を使用していたことに気付きました。

したがって、最善の方法は、できるだけ多くのSass シートをパーシャルにすることです (ファイル名の前にアンダースコアを追加します -> _example.css.scss)。次に、application.css を Sass シートに変更します -> application.css.scss。*= require最後に、 Sprocket で使用していたような呼び出しは使用しないでください。@import代わりに、Rails の Sass呼び出しのベスト プラクティスを使用できますし、使用する必要があります。必要に応じて、パーシャルをサブフォルダーにグロブすることもできます。その理由は、Locomotive がデフォルトで sass-sprockets と sass-rails gem をインストールするためです。これらの gem により、@importsprockets/asset パイプラインを含む application.css.scss ファイル内。後続のスタイルシートに Sass パーシャルを使用することにより、application.css.scss のコンパイルは、後続の各シートを独自のドメインでコンパイルするのではなく、独自のドメインを持ち、それにパーシャルを呼び出します。そうしwagon pushないと、メイン アプリケーション シートの外側の最初のシートで「unknown mixin...」というエラーが表示される可能性があります。パーシャルを依存関係の正しい順序で並べると (すべてのシートが必要とするファイルはどれですか? それが最初になります...)、この方法には、コンパイルされたアプリケーションのスタイルシートを非常に DRY に保つという追加の利点もあります。

乾杯！

于 2015-01-05T15:01:36.950 に答える