私は非常に同じ問題に遭遇しました。
要するに:
- 「内部」ディレクトリ(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を使用してビルドすることが前提条件でした。
これらは結果です:
/app_dev.php/で起動した結果
/app.php/で起動した結果
/で起動された結果
したがって...のみ-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