web-dev-qa-db-ja.com

SASS、Rails 3.1：ベンダー/アセットへのスタイルシートのロード

SASSを使用してRails 3.1（sass-Rails 3.1）アプリにスタイルシートをロードしています。たとえば、app/assets/stylesheetsのsassパーシャルは、@importのapplication.sassを使用してロードされます-

 @import "pages/common"
 @import "pages/**/*"
 @import "jquery-ui.css"

ここで、vendor/assets/stylesheetsもロードしたいと思います。 require vendorがsass推奨の方法であるように思われるため、私は@import pages/*を使用していないことに注意してください。ここでのファイルはcssであり、sassまたはscssではありません。 @import ../../../vendor/assets/stylesheets/*はsassファイルとscssファイルでのみ機能するため、使用できません。

これを行う方法はありますか？

更新

私が今持っているのはこれです。

application.css.scss

//= require_tree .
//= require vendor
//= require_self

これには、上記のすべてのsassパーシャルが含まれます。のrequire vendor

vendor/assets/stylesheets/vendor.cssは次のようになります

//= require_tree .

このアプローチの注意点は、sassミックスイン（ユーザー定義とプラグイン）と共通変数がすべてのパーシャルで使用できるわけではないということです。私が今持っているのは_common_imports.sassで、これはすべてのパーシャルで最初に@importします。

common_imports.sass

@import "colors"
@import "compass/css3/gradient"
@import "compass/css3/border-radius"
@import "compass/css3/box-shadow"

すべてのパーシャルにcommon_importsをインポートすると、非常に繰り返しが感じられます。

ruby-on-rails-3.1sasssprockets
18
Akshay Rawat

私があなたを正しく理解していれば、これが役立つかもしれないと思います。

config/application.rbブロック内のclass Application < Rails::Applicationに以下を追加します。

config.sass.load_paths << File.expand_path('../../lib/assets/stylesheets/')
config.sass.load_paths << File.expand_path('../../vendor/assets/stylesheets/')

上記をアプリに追加したところ、次のディレクティブが両方とも機能しています。

  • Sassのインポート：
    @import 'grid' in app/assets/stylesheets/application.css.scssはファイルvendor/assets/stylesheets/_grid.scssを検索します。
  • 通常のCSSをインポートします。
    @import 'background'は、再びapplication.css.scssで、vendor/assets/stylesheets/background.cssを見つけます。

それは役に立ちますか？問題を誤解してしまったらごめんなさい！

22
Leo

新しいvendor/*ディレクトリ（ベンダー/スタイルシートなど）を作成した場合は、Rails）を再起動する必要があることに注意してください。これがRails = 3.2以降、これが原因である可能性が最も高いです。

4
Alex Dixon

ベンダースタイルシートの拡張子を.scssに変更してみてください。

これを行うと、SASSは必要なインポートを見つけることができました。

3
Brian Wigginton

ベンダー/アセットからアセットファイルをロードするために、以下のパスを使用できます。

以下の行をapplication.cssファイルに入れてください。これでうまくいきます。

 *= require_tree ../../../vendor/assets/stylesheets/.

javascriptアセットについても同じことができます。

3
Rameshwar Vyevhare

ふむ、あなたは奇妙な方法で資産運用会社を使用していると思います。

App/assets/、lib/assets /とvendor/assets/*のすべてが/ assets /の同じ場所にマップされているため、Web側では、すべてが同じフォルダ。

Rails 3.1はcss/sassを使用していません@importしかしスプロケットrequire。

あなたはあなたのapplication.sassの上部にあるべきです：

// require pages/common
// require_tree ./pages
// require jquery-ui
// require_self

スプロケットがすべてを本番環境で同じファイルに配置し、大量のファイルをロードする必要がないようにします。

2
mat

エンジンを使用している場合、これはさらに注意が必要です。簡単なモンキーパスは、エンジンベンダーパスを_SASS_PATH_環境変数に含めることです。これは、_engine.rb_で私のために働いたものです：

ENV['SASS_PATH'] = "#{ENV['SASS_PATH']}:#{File.expand_path('../../vendor/assets/stylesheets/')}"

その時点から、プロジェクトに複数のエンジンを含める場合は、いつでもこれをメソッドに入れてDRYアップすることができます。

0
Figedi