Symfony 2のCSSファイルのアセットのパス


101

問題

(画像、フォントなどの)パスが含まれているCSSファイルがありますurl(..)

私のパス構造は次のとおりです:

...
+-src/
| +-MyCompany/
|   +-MyBundle/
|     +-Resources/
|       +-assets/
|         +-css/
|           +-stylesheets...
+-web/
| +-images/
|   +-images...
...

スタイルシートで自分の画像を参照したい。

最初の解決策

CSSファイルのすべてのパスを絶対パスに変更しました。これも解決策ではありません。アプリケーションもサブディレクトリで動作しているはずです(そうしなければなりません!)。

2番目のソリューション

Asseticをで使用しfilter="cssrewrite"ます。

CSSファイルのすべてのパスを

url("../../../../../../web/images/myimage.png")

リソースディレクトリからディレクトリへの実際のパスを表し/web/imagesます。cssrewriteが次のコードを生成するため、これは機能しません。

url("../../Resources/assets/")

これは明らかに間違った道です。

assetic:dumpこのパスが作成された後、これはまだ間違っています:

url("../../../web/images/myimage.png")

Asseticの小枝コード:

{% stylesheets
    '@MyCompanyMyBundle/Resources/assets/css/*.css'
    filter="cssrewrite"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

現在の(3番目の)ソリューション

すべてのCSSファイルが最終的にになるため、CSSファイルの/web/css/stylexyz.cssすべてのパスを相対パスに変更しました。

url("../images/myimage.png")

この(悪い)ソリューションは、dev環境を除いて機能します。CSSパスは/app_dev.php/css/stylexyz.cssであり、したがって、これから生じる画像パスは/app_dev.php/images/myimage.pngであり、結果としてになりNotFoundHttpExceptionます。

より優れた実用的なソリューションはありますか?


1
ここに私のソリューションを投稿しました:stackoverflow.com/q/9501248/1146363
Cerad

これは実際に使用時のパスの問題を解決しapp_dev.phpますか?
apfelbox 2012年

回答:


194

私は非常に同じ問題に遭遇しました。

要するに:

  • 「内部」ディレクトリ(Resources / assets / css / a.css)に元のCSSを用意する
  • 「公開」ディレクトリ(Resources / public / images / devil.png)に画像を入れても構わない
  • その小枝がそのCSSを受け取り、web / css / a.cssに再コンパイルして、/ web / bundles / mynicebundle / images / devil.png内の画像を指すようにします

私は以下のすべての可能な(正気な)組み合わせでテストを行いました:

  • @表記、相対表記
  • それなしでcssrewriteで解析します
  • CSS画像の背景と直接の<img>タグsrc =がCSSとまったく同じ画像に
  • アセットを使用して解析され、アセットの直接出力を使用して解析されないCSS
  • そしてResources/public/css、CSSと「プライベート」ディレクトリ(など)を使用して「パブリックディレクトリ」を試すことで、これらすべてが増加しResources/assets/cssます。

これにより、同じ枝で合計14の組み合わせが得られ、このルートは

  • 「/app_dev.php/」
  • 「/app.php/」
  • および「/」

したがって、14 x 3 = 42のテストになります。

さらに、これらはすべてサブディレクトリで動作することがテストされており、単純に機能しないため、絶対URLを指定する方法はありません。

テストは2つの名前のない画像で、パブリックフォルダーから作成されたCSSは「a」から「f」まで、内部パスから作成されたものは「g」から「l」までのdivでした。

私は以下を観察しました:

14のテストのうち3つだけが3つのURLで適切に表示されました。そして、NONEは「内部」フォルダー(Resources / assets)からのものでした。予備のCSS PUBLICを用意し、そこから資産のあるFROMを使用してビルドすることが前提条件でした。

これらは結果です:

  1. /app_dev.php/で起動した結果 /app_dev.php/で起動した結果

  2. /app.php/で起動した結果 /app.php/で起動した結果

  3. /で起動された結果 ここに画像の説明を入力してください

したがって...のみ-2番目の画像-Div B-Div Cは、許可される構文です。

ここにTWIGコードがあります:

<html>
    <head>
            {% stylesheets 'bundles/commondirty/css_original/container.css' filter="cssrewrite" %}
                <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
            {% endstylesheets %}

    {# First Row: ABCDEF #}

            <link href="{{ '../bundles/commondirty/css_original/a.css' }}" rel="stylesheet" type="text/css" />
            <link href="{{ asset( 'bundles/commondirty/css_original/b.css' ) }}" rel="stylesheet" type="text/css" />

            {% stylesheets 'bundles/commondirty/css_original/c.css' filter="cssrewrite" %}
                <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
            {% endstylesheets %}

            {% stylesheets 'bundles/commondirty/css_original/d.css' %}
                <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
            {% endstylesheets %}

            {% stylesheets '@CommonDirtyBundle/Resources/public/css_original/e.css' filter="cssrewrite" %}
                <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
            {% endstylesheets %}

            {% stylesheets '@CommonDirtyBundle/Resources/public/css_original/f.css' %}
                <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
            {% endstylesheets %}

    {# First Row: GHIJKL #}

            <link href="{{ '../../src/Common/DirtyBundle/Resources/assets/css/g.css' }}" rel="stylesheet" type="text/css" />
            <link href="{{ asset( '../src/Common/DirtyBundle/Resources/assets/css/h.css' ) }}" rel="stylesheet" type="text/css" />

            {% stylesheets '../src/Common/DirtyBundle/Resources/assets/css/i.css' filter="cssrewrite" %}
                <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
            {% endstylesheets %}

            {% stylesheets '../src/Common/DirtyBundle/Resources/assets/css/j.css' %}
                <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
            {% endstylesheets %}

            {% stylesheets '@CommonDirtyBundle/Resources/assets/css/k.css' filter="cssrewrite" %}
                <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
            {% endstylesheets %}

            {% stylesheets '@CommonDirtyBundle/Resources/assets/css/l.css' %}
                <link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
            {% endstylesheets %}

    </head>
    <body>
        <div class="container">
            <p>
                <img alt="Devil" src="../bundles/commondirty/images/devil.png">
                <img alt="Devil" src="{{ asset('bundles/commondirty/images/devil.png') }}">
            </p>
            <p>
                <div class="a">
                    A
                </div>
                <div class="b">
                    B
                </div>
                <div class="c">
                    C
                </div>
                <div class="d">
                    D
                </div>
                <div class="e">
                    E
                </div>
                <div class="f">
                    F
                </div>
            </p>
            <p>
                <div class="g">
                    G
                </div>
                <div class="h">
                    H
                </div>
                <div class="i">
                    I
                </div>
                <div class="j">
                    J
                </div>
                <div class="k">
                    K
                </div>
                <div class="l">
                    L
                </div>
            </p>
        </div>
    </body>
</html>

container.css:

div.container
{
    border: 1px solid red;
    padding: 0px;
}

div.container img, div.container div 
{
    border: 1px solid green;
    padding: 5px;
    margin: 5px;
    width: 64px;
    height: 64px;
    display: inline-block;
    vertical-align: top;
}

そして、a.css、b.css、c.cssなど:すべて同一で、色とCSSセレクターを変更するだけです。

.a
{
    background: red url('../images/devil.png');
}

「ディレクトリ」の構造は次のとおりです。

ディレクトリ ディレクトリ

これは、個々の元のファイルを公開したくなかったため、特に「less」フィルターや「sass」などで再生したい場合に発生しました。「オリジナル」を公開したくなかったため、コンパイルされたもの。

しかし、朗報があります。「予備のCSS」を公開ディレクトリに置きたくない場合は、でインストールせずに--symlink、実際にコピーを作成してください。「assetic」が複合CSSを構築したら、ファイルシステムから元のCSSを削除して、画像を残すことができます。

コンパイルプロセス コンパイルプロセス

これは--env=prod環境のために行うことに注意してください。

ほんのいくつかの最後の考え:

  • この望ましい動作は、GitまたはMercurialの「public」ディレクトリにイメージを置き、「assets」ディレクトリに「css」を置くことで実現できます。つまり、ディレクトリに示されているようにそれらを「パブリック」に置く代わりに、インストーラー/デプロイヤー(おそらくBashスクリプト)ではなく、「パブリック」ではなく「アセット」にあるa、b、c ...を想像してください。前の「公衆」ディレクトリ内で一時的にCSSを置くためにassets:install実行され、その後assets:install、その後assetic:dump、その後、公開ディレクトリからのCSSの削除を自動化した後assetic:dumpに実行されています。これは、質問で望まれる動作を正確に実現します。

  • 別の(可能であれば不明な)解決策は、 "assets:install"が "public"をソースとしてのみ使用できるか、または "assets"をソースとして使用して公開できるかを調査することです。これは--symlink、開発時にオプションとともにインストールされた場合に役立ちます。

  • さらに、「public」ディレクトリからの削除をスクリプト化する場合、それらを別のディレクトリ(「assets」)に保存する必要がなくなります。彼らは私たちのバージョン管理システムの「パブリック」の中に住むことができます。これにより、--symlink使用も可能になります。

しかし、とにかく、今すぐ注意:元のものがなくなったためrm -Rf)、ソリューションは3 つではなく2つしかありません。元のアセットが存在すると想定して、asset()呼び出しだったため、動作しているdiv "B"は動作しなくなりました。「C」(コンパイル済み)のみが機能します。

つまり、最終的な勝者のみが存在します。Div "C"は、トピックで要求された内容を正確に許可します。コンパイルするには、画像へのパスを尊重し、元のソースを公開しないでください。

勝者はC

勝者はC


3
以前の投稿の画像へのリンク:1)/app_dev.php/起動した結果、2)/app.php/ linkで起動した結果、3)/ linkで起動した結果、4)ディレクトリリンク、5)コンパイルプロセスリンク、6)勝者リンク
Xavi Montero

1
そして、別のバンドルから画像を追加したい場合は、background-image: url('../images/devil.png');これを使用する代わりにbackground-image: url('../../../bundles/frontendlayout/images/devil.png');
Xavi Montero

1
また、「以下」と「cssrewrite」を組み合わせる作品:{% stylesheets filter="cssrewrite,less" "bundles/frontendlayout/less/layout.less" %} <link href="{{ asset_url }}" rel="stylesheet" type="text/css" /> {% endstylesheets %}
シャビモンテロ

1
これはsymfonyのドキュメントに記載されています。こちらをご覧ください
ノアダンカン

17

現在、cssrewriteフィルターは@bundle表記と互換性がありません。したがって、2つの選択肢があります。

  • ウェブフォルダ内のCSSファイルを参照する(後に:console assets:install --symlink web

    {% stylesheets '/bundles/myCompany/css/*." filter="cssrewrite" %}
  • このようにCSSに画像を埋め込むには、cssembedフィルターを使用します。

    {% stylesheets '@MyCompanyMyBundle/Resources/assets/css/*.css' filter="cssembed" %}

コメントありがとうございます。2番目の解決策は、画像がかなり小さい場合に非常に適しています。ただし、CSSファイルに100k以上の画像を入れるのは快適ではありません。
apfelbox 2012

9

@ xavi-monteroのおかげで、うまくいったことを投稿します。

CSSをバンドルのResource/public/cssディレクトリに配置し、画像をに配置しますResource/public/img

'bundles/mybundle/css/*.css'レイアウトでアセットパスをフォームに変更します。

config.ymlcss_rewriteアセットにルールを追加します。

assetic:
    filters:
        cssrewrite:
            apply_to: "\.css$"

次にアセットをインストールし、assetticでコンパイルします。

$ rm -r app/cache/* # just in case
$ php app/console assets:install --symlink
$ php app/console assetic:dump --env=prod

これは、開発ボックスには十分であり、--symlink便利なので、からに入るときにアセットを再インストールする必要はありません(たとえば、新しいイメージを追加する)app_dev.php

本番サーバーの場合、(-symlink 'オプションを(私の展開スクリプトで)削除し、最後にこのコマンドを追加しました:

$ rm -r web/bundles/*/css web/bundles/*/js # all this is already compiled, we don't need the originals

すべて完了です。これにより、.cssファイルで次のようなパスを使用できます。../img/picture.jpeg


5

私は同じ問題を抱えていて、回避策として以下を使用してみました。これまでのところ機能しているようです。これらすべての静的アセットへの参照のみを含むダミーテンプレートを作成することもできます。

{% stylesheets
    output='assets/fonts/glyphicons-halflings-regular.ttf'
    'bundles/bootstrap/fonts/glyphicons-halflings-regular.ttf'
%}{% endstylesheets %}

テンプレートに何も表示されないことを意味する出力の省略に注意してください。assetic:dumpを実行すると、ファイルが目的の場所にコピーされ、CSSには期待どおりの作業が含まれます。


1
名前付きアセットの構成エントリを使用することができ、テンプレートに含める必要はありません。それはとにかくダンプしますsymfony.com/doc/current/cookbook/assetic/...
venimus

3

それが誰かを助けることができるなら、私たちはAsseticと多くの苦労をしてきました、そして今、私たちは開発モードで次のことをしています:

  • 開発環境でのアセットファイルのダンプのように設定するため、config_dev.ymlではコメントしました:

    #assetic:
    #    use_controller: true

    そしてrouting_dev.yml

    #_assetic:
    #    resource: .
    #    type:     assetic
  • Webルートからの絶対URLを指定します。たとえば、background-image:url("/bundles/core/dynatree/skins/skin/vline.gif");注:仮想ホストのウェブルートはを指していweb/ます。

  • cssrewriteフィルターの使用なし


3
これは有効な解決策ですが、サブディレクトリからファイルを提供しない場合のみですhttp://example.org/sub/。例:
apfelbox 2012

1

私はしばしばベンダーの下でそれをインストールする作曲家でcss / jsプラグインを管理します。これらをweb / bundlesディレクトリにシンボリックリンクします。これにより、composerは必要に応じてバンドルを更新できます。

例:

1-シンボリックリンクを1回のみ(from web / bundles /

ln -sf vendor/select2/select2/dist/ select2

2-小枝テンプレートで、必要に応じてアセットを使用します:

{{ asset('bundles/select2/css/fileinput.css) }}

よろしく。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.