Symfony 2의 CSS 파일 자산 경로

source

Symfony 2의 CSS 파일 자산 경로

gigabyte 2022. 10. 2. 22:06

Symfony 2의 CSS 파일 자산 경로

문제

패스(이미지, 폰트 등)가 포함된 CSS 파일이 있습니다. url(..)를 참조해 주세요.

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

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

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

첫 번째 솔루션

CSS 파일의 모든 경로를 절대 경로로 변경했습니다.애플리케이션은 서브디렉토리에서도 동작해야 하기 때문에, 이것은 해결책이 되지 않습니다.

두 번째 솔루션

과 함께 사용filter="cssrewrite".

그래서 CSS 파일의 모든 경로를

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

에서 소소 to to to to to to to to to to to to to to to to to to to 로 가는 실제 를 나타냅니다./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.cssCSS 파일의 모든 경로를 상대 경로로 변경했습니다.

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

은 (불량)을 동작합니다.dev「」: 패스는 「CSS」입니다./app_dev.php/css/stylexyz.css로 인해 는 """입니다./app_dev.php/images/myimage.png 「」가 .NotFoundHttpException.

더 낫고 효과적인 해결책이 있을까요?

아주 똑같은 문제에 부딪쳤다

요컨대:

원래 CSS를 "내부" dir(Resources/assets/css/a.css)에 포함할 수 있습니다.
이미지를 "public" dir (Resources/public/images/devil.png)에 저장할 수 있습니다.
Twig가 해당 CSS를 가져와 web/css/a.css로 재컴파일하고 이미지를 /web/bundles/mynicebundle/images/devil로 가리킵니다.png

다음의 모든 가능한 (sane) 조합으로 테스트를 실시했습니다.

@syslog, 상대 표기법
cssrewrite를 사용한 구문 분석(사용하지 않음)
CSS 이미지의 배경과 CSS와 동일한 이미지에 <img> 태그 src=를 직접 표시함
CSS는 asset을 사용하여 해석되며 asset의 직접 출력을 사용하여 해석되지 않습니다.
이 은 " dir" ("public dir"로했습니다.Resources/public/css 「」「」「」「」)를 Resources/assets/css를 참조해 주세요.

이로써 동일한 나뭇가지에 총 14개의 조합이 제공되었고, 이 루트는

"/app_dev.dev/"
"/app.filename/"
및 "/"

따라서 14 x 3 = 42 검정을 제공합니다.

게다가 이 모든 것이 서브디렉토리에서 동작하는 것을 테스트하고 있기 때문에, 절대 URL을 지정하는 것으로 속일 수 없습니다.그것은 단순히 기능하지 않기 때문입니다.

테스트는 퍼블릭폴더에서 빌드된 CSS의 경우 이름이 'a'에서 'f'로, 내부 경로에서 빌드된 CSS의 경우 이름이 'g에서 'l'로 지정된 두 개의 이름 없는 이미지였습니다.

다음 사항을 관찰했습니다.

14개의 테스트 중 3개만이 3개의 URL에 적절하게 표시되었습니다.또한 NONE은 "내부" 폴더(리소스/자산)에서 가져온 것입니다.예비 CSS PUBLIC을 가지고 거기서부터의 어셋트로 구축하는 것이 전제 조건이었습니다.

결과는 다음과 같습니다.

는 /app_dev /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');
}

「디렉토리」의 구조는 다음과 같습니다.

디렉토리

이 모든 것은 개별 원본 파일이 일반에 공개되는 것을 원치 않았기 때문에, 특히 "덜" 필터나 "사스" 또는 이와 유사한 것으로 재생하고 싶다면...저는 제 "원본"을 출판하고 싶지 않았습니다. 편집본만 출판하고 싶었죠.

하지만 좋은 소식이 있어요.공공 디렉토리에 예비 CSS를 두고 싶지 않다면...를 사용하지 않고 설치하다--symlink카피를 만들고 있습니다.복합 CSS를 'asset' 구축하면 파일시스템에서 원래 CSS를 삭제하고 이미지를 남길 수 있습니다.

컴파일 프로세스

은, 「」에 합니다.--env=prod★★★★★★ 。

마지막으로 몇 가지 생각:

이 바람직한 동작은 Git 또는 Mercurial의 "public" 디렉토리와 "assets" 디렉토리의 "css"에 이미지를 저장함으로써 달성할 수 있습니다.즉, 디렉토리에서 나타내는 것과 같이 「public」으로 하는 것이 아니라, 인스톨러/디플로이더(아마도 Bash 스크립트)가 CSS를 「public」dir내에 일시적으로 배치하는 것보다, 「public」으로 하는 것을 상정합니다.assets:install이 되고, 그 다음에 실행이 됩니다.assets:install , , , 「」assetic:dump 후 assetic:dump을 사용하다이것은 질문에서 원하는 행동을 정확히 달성할 것이다.
또 다른 (가능한 경우 알려지지 않은) 솔루션은 "assets:install"이 "public"만 사용할 수 있는지 또는 "assets"를 게시할 소스로 사용할 수 있는지 확인하는 것입니다.은 이능,, 스 with with with with with with with with with with with with with with with with with with 와 함께 설치하면 도움이 됩니다.--symlink옵션을 선택할 수 있습니다.
또, 「퍼블릭」디르로부터의 삭제를 스크립트 하는 경우는, 그것들을 다른 디렉토리(「자산」)에 보존할 필요가 없어집니다.버전 관리 시스템의 "public" 내에서 사용할 수 있습니다.이는 일반에 배포될 때 삭제되기 때문입니다.이 때문에,--symlinkusagedisplays..

어쨌든, 지금 주의해 주세요.원본은 현재 존재하지 않습니다(rm -Rf은 3가지가 3번입니다.원래 에셋이 있다고 가정한 asset() 호출이었기 때문에 현용 div "B"는 더 이상 작동하지 않습니다.「C」(컴파일 된 것)만 동작합니다.

최종 우승자는 다음과 같습니다.Div C는 토픽에서 질문한 내용을 그대로 허용합니다.컴파일 하려면 , 이미지의 패스를 존중해, 원래의 소스를 공개하지 말아 주세요.

우승자는 C입니다.

우승자는 C입니다.

cssrewrite 필터는 현재 @bundle 표기와 호환되지 않습니다.두 가지 선택지가 있습니다.

Web CSS의 CSS이다(Web:console assets:install --symlink web)

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

CSS에 이미지를 삽입하려면 cssembed 필터를 사용합니다.

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

@xavi-montero 덕분에 나에게 효과가 있는 것을 올립니다.

에 CSS를 .Resource/public/css및 에는 「」, 「」, 「」, 「」, 「」라고 하는 것이 있습니다.Resource/public/img.

를 Assetic 으로 합니다.'bundles/mybundle/css/*.css' 배치되어 있습니다

»config.yml rule , " " "css_rewrite가가: :

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

이제 자산을 설치하고 자산으로 컴파일합니다.

$ 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

이렇게 파일에 다음과 같은 경로를 사용할 수 있습니다.../img/picture.jpeg

저도 같은 문제가 있어서 다음 사항을 해결하려고 했습니다.아직까지는 효과가 있는 것 같아.이러한 모든 정적 자산에 대한 참조만 포함하는 더미 템플릿을 만들 수도 있습니다.

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

출력 누락에 주의해 주세요.이는 템플릿에 아무것도 표시되지 않음을 의미합니다.assetic:dump를 실행하면 파일이 원하는 위치에 복사되고 css에 예상대로 작업이 포함됩니다.

누군가에게 도움이 될 수 있다면 Assetic과 많은 어려움을 겪었고, 현재 개발 모드에서 다음을 수행하고 있습니다.

개발 환경에서의 자산 파일 덤핑과 같이 셋업하여config_dev.yml츠키다
```
#assetic:
#    use_controller: true
```
routing_dev.yml에서는
```
#_assetic:
#    resource: .
#    type:     assetic
```
absolute URL 。를 들어 " " background-image" 입니다.url("/bundles/core/dynatree/skins/skin/vline.gif");는 의 : vhost Web을 .web/.
cssrewrite 필터 사용 안 함

css/js 플러그인을 벤더 아래에 설치하는 컴포저와 함께 관리합니다.웹/번들 디렉토리에 심볼릭 링크하면 작성자가 번들을 필요에 따라 업데이트할 수 있습니다.

예:

1 - 심볼링크 (web/web 명령어 사용)

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

2 - 필요에 따라 twig 템플릿에서 자산을 사용합니다.

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

안부 전해요.

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

'source' 카테고리의 다른 글

라라벨의 장인 설치 방법은? (0)	2022.10.19
도커 컴포지트 영속적인 데이터 문제 (0)	2022.10.02
디폴트로는 index.dload는 로드되지 않음 (0)	2022.10.02
MySQL: 인라인 하위 쿼리에서 여러 열 반환 (0)	2022.10.02
들여쓰기 오류: unindentent가 외부 들여쓰기 수준과 일치하지 않습니다. (0)	2022.10.02

현재글Symfony 2의 CSS 파일 자산 경로

각종 프로그래밍 정보를 다루는 블로그입니다.

C, Excel, MySQL, JavaScript, WordPress, sql-server, JSON, Python, vuejs2, vuex, Java, spring-boot, oracle, WPF, PHP, Ajax, SWiFT, AngularJS, mariaDB, reactjs,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

gigabyte

Symfony 2의 CSS 파일 자산 경로

Symfony 2의 CSS 파일 자산 경로

문제

첫 번째 솔루션

두 번째 솔루션

현재의 (세 번째) 솔루션

'source' 카테고리의 다른 글

'source'의 다른글

티스토리툴바

Symfony 2의 CSS 파일 자산 경로

Symfony 2의 CSS 파일 자산 경로

문제

첫 번째 솔루션

두 번째 솔루션

현재의 (세 번째) 솔루션

'source' 카테고리의 다른 글

'source'의 다른글

관련글

티스토리툴바