Symfony 2의 CSS 파일에있는 자산 경로 프로그램이 하위 디렉토리에서도

문제

일부 경로 (이미지, 글꼴 등 ) 가있는 CSS 파일이 있습니다..url(..)

내 경로 구조는 다음과 같습니다.

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

스타일 시트에서 내 이미지를 참조하고 싶습니다.

첫 번째 솔루션

CSS 파일의 모든 경로를 절대 경로로 변경했습니다. 응용 프로그램이 하위 디렉토리에서도 작동해야하기 때문에 이것은 해결책이 아닙니다.

두 번째 솔루션

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 %}

현재 (세 번째) 솔루션

모든 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입니다.

더 좋고 작동하는 솔루션이 있습니까?

답변

나는 매우 똑같은 문제를 만났습니다.

요컨대 :

“내부”디렉토리 (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와 매우 동일한 이미지로
assetic으로 구문 분석되고 자산 직접 출력으로 구문 분석하지 않고 CSS
그리고이 모든 것은 Resources/public/cssCSS와 함께 “public dir”(as )와 “private”디렉토리 (as Resources/assets/css) 를 시도함으로써 곱해졌습니다 .

이것은 나에게 동일한 나뭇 가지에 총 14 개의 조합을 제공했고,이 경로는

“/app_dev.php/”
“/app.php/”
및 “/”

따라서 14 x 3 = 42 테스트를 제공합니다.

또한이 모든 작업은 하위 디렉토리에서 테스트되었으므로 절대 URL이 작동하지 않기 때문에 절대 URL을 제공하여 속일 방법이 없습니다.

테스트는 두 개의 이름이 지정되지 않은 이미지 였고 공용 폴더에서 빌드 된 CSS에 대해 ‘a’에서 ‘f’로 이름이 지정된 div, 내부 경로에서 빌드 된 이미지에 대해 ‘g에서’l ‘로 이름이 지정되었습니다.

나는 다음을 관찰했다 :

14 개의 테스트 중 3 개만이 3 개의 URL에 적절하게 표시되었습니다. 그리고 NONE은 “내부”폴더 (Resources / assets)에서 왔습니다. 여분의 CSS PUBLIC을 가지고 거기에서 assetic FROM으로 빌드하는 것이 전제 조건이었습니다.

결과는 다음과 같습니다.

/app_dev.php/로 시작된 결과
/app.php/로 시작된 결과
/로 시작된 결과

그래서 …-두 번째 이미지-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');
}

“디렉토리”구조는 다음과 같습니다.

디렉토리

이 모든 것은 개별 원본 파일이 공개되는 것을 원하지 않았기 때문에, 특히 “덜”필터 나 “sass”또는 이와 유사한 것으로 재생하고 싶을 때 … “원본”이 게시되는 것을 원하지 않았습니다. 컴파일 된 하나.

그러나 좋은 소식이 있습니다. 공용 디렉토리에 “예비 CSS”를 사용하지 않으려면 …로 설치하지 --symlink말고 실제로 복사본을 만드십시오. “assetic”이 복합 CSS를 구축하고 나면 파일 시스템에서 원본 CSS를 삭제하고 이미지를 그대로 둘 수 있습니다.

편집 과정

참고 --env=prod환경을 위해이 작업을 수행 합니다.

몇 가지 마지막 생각 :

이 원하는 동작은 Git 또는 Mercurial의 “public”디렉토리에 이미지 를, “assets”디렉토리에 “css”를 두면 달성 할 수 있습니다 . 즉, 디렉토리에 표시된대로 “공용”에있는 대신 설치 프로그램 / 배포자 (아마도 Bash 스크립트)가 있는 것보다 “공용”대신 “자산”에 상주하는 a, b, c …를 상상해보십시오. CSS를 assets:install실행 하기 전에 “public”디렉토리에 임시로 넣은 다음 assets:install, 그런 다음 실행 된 assetic:dump후 공용 디렉토리에서 CSS 제거를 자동화합니다 assetic:dump. 이것은 질문에서 원하는 행동을 정확하게 얻을 수 있습니다.
가능한 경우 알 수없는 또 다른 해결책은 “assets : install”이 “public”을 소스로만 사용할 수 있는지 아니면 “assets”를 게시 할 소스로 사용할 수 있는지 탐색하는 것입니다. --symlink개발할 때 옵션 과 함께 설치하면 도움이됩니다 .
또한 “공용”디렉토리에서 제거하는 스크립트를 작성하면 별도의 디렉토리 ( “자산”)에 저장할 필요가 없어집니다. 공개적으로 배포 할 때 삭제되므로 버전 관리 시스템의 “공개”내에있을 수 있습니다. 이것은 또한 --symlink사용을 허용 합니다.

그러나 어쨌든, 지금주의 : 이제 원본은 더 이상 존재하지 않습니다 (rm -Rf ), 3 개가 아닌 2 개의 솔루션 만 있습니다. 작업 div “B”는 원래 자산이 있다고 가정하는 asset () 호출이므로 더 이상 작동하지 않습니다. “C”(컴파일 된 것) 만 작동합니다.

따라서 … 최종 우승자 만 있습니다. Div “C”는 주제에서 요청한 내용을 그대로 허용합니다. 컴파일하려면 이미지 경로를 존중하고 원본 소스를 대중에게 공개하지 마십시오.

승자는 C

답변

cssrewrite 필터는 현재 @bundle 표기법과 호환되지 않습니다. 따라서 두 가지 선택이 있습니다.

웹 폴더에 CSS 파일 참조 (후를 : console assets:install --symlink web)
```
{% stylesheets '/bundles/myCompany/css/*." filter="cssrewrite" %}
```

cssembed 필터를 사용하여 이와 같이 CSS에 이미지를 삽입하십시오.

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

답변

@ xavi-montero 덕분에 나를 위해 일한 것을 게시 할 것입니다.

번들의 Resource/public/css디렉토리에 CSS를 넣고 이미지를 Resource/public/img.

'bundles/mybundle/css/*.css'레이아웃에서 자산 경로를 양식으로 변경 합니다.

에서 config.yml, 규칙을 추가 css_rewriteassetic에 :

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

이제 자산을 설치하고 assetic으로 컴파일하십시오.

$ 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

답변

나는 같은 문제가 있었고 해결 방법으로 다음을 사용해 보았습니다. 지금까지 작동하는 것 같습니다. 모든 정적 자산에 대한 참조 만 포함하는 더미 템플릿을 만들 수도 있습니다.

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

출력이 생략되어 템플릿에 아무것도 표시되지 않습니다. assetic : dump를 실행하면 파일이 원하는 위치로 복사되고 CSS에 예상대로 작업이 포함됩니다.

답변

누군가를 도울 수 있다면 Assetic으로 많은 어려움을 겪었으며 현재 개발 모드에서 다음을 수행하고 있습니다.

Dev Environmen의 Dumping Asset Files에서 와 같이 설정 하므로에서 다음 config_dev.yml과 같이 주석을 달았습니다.
```
#assetic:
#    use_controller: true
```
그리고 routing_dev.yml
```
#_assetic:
#    resource: .
#    type:     assetic
```
웹 루트에서 URL을 절대로 지정하십시오. 예 : background-image : url("/bundles/core/dynatree/skins/skin/vline.gif");참고 : 가상 호스트 웹 루트가 web/.
cssrewrite 필터 사용 없음

답변

나는 벤더 아래에 설치하는 composer로 css / js 플러그인을 관리합니다. 나는 그것들을 web / bundles 디렉토리에 심볼릭 링크하여 필요에 따라 composer가 번들을 업데이트 할 수 있도록합니다.

예 :

1-심볼릭 링크는 한 번만 (웹 / 번들 /에서 명령 사용)

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

2-나뭇 가지 템플릿에서 필요한 경우 자산 사용 :

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

문안 인사.

답변

Exit mobile version

IT HOW

무엇이는 물어보세요

Symfony 2의 CSS 파일에있는 자산 경로 프로그램이 하위 디렉토리에서도

문제

첫 번째 솔루션

두 번째 솔루션

현재 (세 번째) 솔루션

답변

답변

답변

답변

답변

답변

답변