Tôi đã gặp phải vấn đề rất giống nhau.
Nói ngắn gọn:
- Sẵn sàng có CSS gốc trong một dir "nội bộ" (Tài nguyên / tài sản / css / a.css)
- Sẵn sàng có hình ảnh trong dir "công khai" (Resources / public / images / devil.png)
- Sẵn sàng rằng cành cây lấy CSS đó, biên dịch lại nó thành web / css / a.css và làm cho nó trỏ hình ảnh trong /web/bundles/mynicebundle/images/devil.png
Tôi đã thực hiện một bài kiểm tra với TẤT CẢ các kết hợp có thể (lành mạnh) của những điều sau:
- @ chú thích, ký hiệu tương đối
- Phân tích cú pháp bằng cssrewrite, không có nó
- Nền hình ảnh CSS so với thẻ <img> trực tiếp src = đến cùng một hình ảnh với CSS
- CSS được phân tích cú pháp với assetic và cũng không cần phân tích cú pháp với đầu ra trực tiếp assetic
- Và tất cả điều này được nhân lên bằng cách thử một "public dir" (as
Resources/public/css) với CSS và một thư mục "private" (as Resources/assets/css).
Điều này đã cho tôi tổng cộng 14 sự kết hợp trên cùng một nhánh và tuyến đường này được khởi chạy từ
- "/app_dev.php/"
- "/app.php/"
- và "/"
do đó cho ra 14 x 3 = 42 thử nghiệm.
Ngoài ra, tất cả điều này đã được thử nghiệm hoạt động trong một thư mục con, vì vậy không có cách nào để đánh lừa bằng cách đưa ra các URL tuyệt đối bởi vì chúng chỉ đơn giản là không hoạt động.
Các bài kiểm tra là hai hình ảnh không được đặt tên và sau đó các div được đặt tên từ 'a' đến 'f' cho CSS được xây dựng từ thư mục chung và đặt tên 'g thành' l 'cho các hình ảnh được tạo từ đường dẫn nội bộ.
Tôi đã quan sát những điều sau:
Chỉ 3 trong số 14 bài kiểm tra được hiển thị đầy đủ trên ba URL. Và NONE là từ thư mục "nội bộ" (Tài nguyên / tài sản). Điều kiện tiên quyết là phải có CSS PUBLIC dự phòng và sau đó xây dựng với assetic FROM đó.
Đây là những kết quả:
Kết quả được khởi chạy với /app_dev.php/
Kết quả được khởi chạy với /app.php/
Kết quả được đưa ra với /
Vì vậy, ... CHỈ - Hình ảnh thứ hai - Div B - Div C là các cú pháp được phép.
Đây là mã 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>
Vùng chứa. 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;
}
Và a.css, b.css, c.css, v.v.: tất cả đều giống hệt nhau, chỉ thay đổi màu sắc và bộ chọn CSS.
.a
{
background: red url('../images/devil.png');
}
Cấu trúc "thư mục" là:
Thư mục
Tất cả những điều này xảy ra, bởi vì tôi không muốn các tệp gốc riêng lẻ bị lộ ra trước công chúng, đặc biệt nếu tôi muốn sử dụng bộ lọc "less" hoặc "sass" hoặc tương tự ... Tôi không muốn "bản gốc" của mình được xuất bản, chỉ biên dịch một.
Nhưng có một tin tốt . Nếu bạn không muốn có "CSS dự phòng" trong các thư mục chung ... hãy cài đặt chúng không phải bằng --symlink, mà hãy thực sự tạo một bản sao. Sau khi "assetic" đã xây dựng CSS tổng hợp và bạn có thể XÓA CSS gốc khỏi hệ thống tệp và để lại các hình ảnh:
Quy trình biên dịch
Lưu ý tôi làm điều này vì --env=prodmôi trường.
Chỉ là một vài suy nghĩ cuối cùng:
Hành vi mong muốn này có thể đạt được bằng cách có các hình ảnh trong thư mục "công khai" trong Git hoặc Mercurial và "css" trong thư mục "tài sản". Nghĩa là, thay vì đặt chúng ở "công cộng" như được hiển thị trong các thư mục, hãy tưởng tượng a, b, c ... nằm trong "tài sản" thay vì "công khai", hơn là có trình cài đặt / trình triển khai của bạn (có thể là tập lệnh Bash ) để tạm thời đặt CSS bên trong dir "công khai" trước khi assets:installđược thực thi, sau assets:installđó assetic:dump, rồi tự động xóa CSS khỏi thư mục công cộng sau khi assetic:dumpđã được thực thi. Điều này sẽ thực hiện CHÍNH XÁC hành vi mong muốn trong câu hỏi.
Một giải pháp khác (không xác định nếu có thể) sẽ là khám phá xem "tài sản: cài đặt" chỉ có thể lấy "công khai" làm nguồn hoặc cũng có thể lấy "tài sản" làm nguồn để xuất bản. Điều đó sẽ hữu ích khi được cài đặt với --symlinktùy chọn khi phát triển.
Ngoài ra, nếu chúng tôi định viết kịch bản xóa khỏi dir "công khai", thì nhu cầu lưu trữ chúng trong một thư mục riêng ("tài sản") sẽ biến mất. Chúng có thể tồn tại bên trong "công khai" trong hệ thống kiểm soát phiên bản của chúng tôi vì chúng sẽ bị loại bỏ khi triển khai cho công chúng. Điều này cũng cho phép --symlinksử dụng.
NHƯNG BẤT CỨ LÚC NÀO, THẬN TRỌNG NGAY BÂY GIỜ: Vì bây giờ bản gốc không còn ở đó nữa ( rm -Rf), chỉ có hai giải pháp, không phải ba. Div đang hoạt động "B" không hoạt động nữa vì nó là một lệnh gọi nội dung () giả sử có nội dung ban đầu. Chỉ "C" (một trong những biên dịch) sẽ hoạt động.
Vì vậy ... CHỈ CÓ MỘT NGƯỜI CHIẾN THẮNG CUỐI CÙNG: Div "C" cho phép CHÍNH XÁC những gì nó được yêu cầu trong chủ đề: Được tổng hợp, tôn trọng đường dẫn đến hình ảnh và không để lộ nguồn gốc ra công chúng.
Người chiến thắng là C
