2

初めて LESS を使用して RoR アプリケーションをセットアップしていますが、一部のアセット パスに問題があります。

何らかの理由で、 を使用して、asset_path()またはを使用image_path()して参照される LESS ファイル内で画像を参照@importすると、埋め込まれた Ruby 呼び出しを含めるたびに、インポートされた LESS ファイルの処理が暗黙のうちに失敗するように見えます。

アプリケーションのセットアップ方法は次のとおりです。

ファイルシステム：

views
 -> home
app
 -> assets
    -> images
       -> general
          -> side_shadow.png
       -> home
          -> chair.png
    -> stylesheets
       -> less
          -> home.css.less.erb
          -> template.css.less.erb
          -> style.css.less.erb
          -> fonts.css.less.erb
public
 -> assets
    -> general
       -> side_shadow.png
    -> home
       -> chair.png

私のアプリケーションでは、「ホーム」はレンダリングされるビューです。ロードするときは、次を使用しますhome.css.less.erb。

@import url("template.css.less.erb");

div#holder
{
    background: url(<%= asset_path('home/chair.png')%>);
    /* This resolves appropriately as /assets/home/chair.png... */
}
...

次にロードしますtemplate.css.less.erb：

@import url("style.css.less.erb");

...

最終的に読み込まれるものstyle.css.less.erb：

@import url("fonts.css.less.erb");

body
{
    background-image: url(<%= asset_path('general/side_shadow.png') %>);
}
...

を使用してこれを実行するrake assets:precompileと、中止され、ファイルで定義した CSS クラスfonts.css.less.erbが未定義であることが通知されます。これは、フォント LESS ファイルを処理する機会がなかったことを示唆しているようです。

<%= asset_path('general/side_shadow.png') %>ただし、これをリテラル pathに置き換えると'/assets/general/side_shadow.png'、例外なく続行され、意図したとおりにページが読み込まれます。

この LESS ファイル (別の LESS ファイルによってインポートされたもの) に、この埋め込まれた Ruby 呼び出しを含めることができないのはなぜですか? ルートhome.css.less.erbファイルでは問題なく実行できますが、それが参照する LESS ファイルでは実行できません。

私の宝石ファイル:

source 'https://rubygems.org'

gem 'rails', '3.2.8'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'sqlite3'

# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails' #, '~> 3.2.3'
  gem 'coffee-rails' #, '~> 3.2.1'
  gem 'less-rails'
  gem 'less-rails-bootstrap'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  gem 'therubyracer', :platforms => :ruby

  gem 'uglifier' #, '>= 1.0.3'
end

gem 'jquery-rails'

# To use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.0.0'

# To use Jbuilder templates for JSON
# gem 'jbuilder'

# Use unicorn as the app server
# gem 'unicorn'

# Deploy with Capistrano
# gem 'capistrano'

# To use debugger
# gem 'debugger'
  • デイブ
4

1 に答える 1

3

私はこれを間違った方法で追求していたことが判明しました。Ruby を使用せずにアセット パスを構築できるようにする CSS/LESS 内に埋め込まれた関数があるため、埋め込み Ruby を使用してアセット パスを構築する必要はありません。これは、次の 2 つのことを意味します。

  • まず、ファイルの.erb拡張子を削除し.css.less.erbます (これらの拡張子はとにかく厄介でした...)

  • 次に、埋め込まれた Ruby 呼び出しを同等の CSS/LESS に置き換えます。

    それ以外の：

    background-image: url(<%= asset_path('general/side_shadow.png') %>);

    代わりに、次の CSS/LESS 関数を使用してください。

    background-image: image-url("general/side_shadow.png");

RoR アセット パイプライン ガイドでは、「CSS & ERB」セクションで埋め込み Ruby を使用することを示唆しているように見えたため、これは明確ではありませんでした。ただし、「CSS & SASS」セクションには、これらの関数への適切な参照が含まれていました。(振り返ってみると、SASS は LESS とほぼ同等であるため、ガイドのこのセクションは LESS により適しているようです。)

さらに、この投稿が問題の解決に役立たない場合、これは同様の質問と同様の回答です。

于 2012-10-11T19:35:50.240 に答える