programing

Symfony 2의 CSS 파일에있는 자산 경로

nasanasas 2020. 8. 20. 18:57
반응형

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으로 빌드하는 것이 전제 조건이었습니다.

결과는 다음과 같습니다.

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

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

  3. /로 시작된 결과 여기에 이미지 설명 입력

그래서 ...-두 번째 이미지-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환경을 위해이 작업을 수행 합니다.

몇 가지 마지막 생각 :

  • This desired behaviour can be achieved by having the images in "public" directory in Git or Mercurial and the "css" in the "assets" directory. That is, instead of having them in "public" as shown in the directories, imagine a, b, c... residing in the "assets" instead of "public", than have your installer/deployer (probably a Bash script) to put the CSS temporarily inside the "public" dir before assets:install is executed, then assets:install, then assetic:dump, and then automating the removal of CSS from the public directory after assetic:dump has been executed. This would achive EXACTLY the behaviour desired in the question.

  • Another (unknown if possible) solution would be to explore if "assets:install" can only take "public" as the source or could also take "assets" as a source to publish. That would help when installed with the --symlink option when developing.

  • Additionally, if we are going to script the removal from the "public" dir, then, the need of storing them in a separate directory ("assets") disappears. They can live inside "public" in our version-control system as there will be dropped upon deploy to the public. This allows also for the --symlink usage.

BUT ANYWAY, CAUTION NOW: As now the originals are not there anymore (rm -Rf), there are only two solutions, not three. The working div "B" does not work anymore as it was an asset() call assuming there was the original asset. Only "C" (the compiled one) will work.

So... there is ONLY a FINAL WINNER: Div "C" allows EXACTLY what it was asked in the topic: To be compiled, respect the path to the images and do not expose the original source to the public.

The winner is C

승자는 C

The cssrewrite filter is not compatible with the @bundle notation for now. So you have two choices:

  • Reference the CSS files in the web folder (after: console assets:install --symlink web)

    {% stylesheets '/bundles/myCompany/css/*." filter="cssrewrite" %}

  • Use the cssembed filter to embed images in the CSS like this.

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

I'll post what worked for me, thanks to @xavi-montero.

Put your CSS in your bundle's Resource/public/css directory, and your images in say Resource/public/img.

Change assetic paths to the form 'bundles/mybundle/css/*.css', in your layout.

In config.yml, add rule css_rewrite to assetic:

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

Now install assets and compile with assetic:

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

This is good enough for the development box, and --symlink is useful, so you don't have to reinstall your assets (for example, you add a new image) when you enter through app_dev.php.

For the production server, I just removed the '--symlink' option (in my deployment script), and added this command at the end:

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

All is done. With this, you can use paths like this in your .css files: ../img/picture.jpeg

I had the same problem and I just tried using the following as a workaround. Seems to work so far. You can even create a dummy template that just contains references to all those static assets.

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

Notice the omission of any output which means nothing shows up on the template. When I run assetic:dump the files are copied over to the desired location and the css includes work as expected.

If it can help someone, we have struggled a lot with Assetic, and we are now doing the following in development mode:

  • Set up like in Dumping Asset Files in the dev Environmen so in config_dev.yml, we have commented:

    #assetic:
#    use_controller: true

    And in routing_dev.yml

    #_assetic:
#    resource: .
#    type:     assetic

  • Specify the URL as absolute from the web root. For example, background-image: url("/bundles/core/dynatree/skins/skin/vline.gif"); Note: our vhost web root is pointing on web/.

  • No usage of cssrewrite filter

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

예 :

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

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

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

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

문안 인사.

참고 URL : https://stackoverflow.com/questions/9500573/path-of-assets-in-css-files-in-symfony-2

반응형

'programing' 카테고리의 다른 글

jboss 서버 시작 오류  (0) 2020.08.20
MySQL을 사용하여 테이블에 레코드 인덱스를 포함하는 열을 어떻게 생성 할 수 있습니까?  (0) 2020.08.20
iOS 자바 스크립트 브리지  (0) 2020.08.20
SQLAlchemy ORM을 사용한 대량 삽입  (0) 2020.08.20
dmesg 타임 스탬프를 사용자 지정 날짜 형식으로 변환  (0) 2020.08.20

'programing'의 다른글

  • 현재글Symfony 2의 CSS 파일에있는 자산 경로

관련글

댓글

티스토리툴바