Проблема с путями изображений CSS внутри AppBundle по умолчанию

Я использую Symfony 2.3.25 и очень плохо знаком с фреймворком. У меня есть Symfony для среды разработки через мою конфигурацию apache. Проблема, с которой я сталкиваюсь, заключается в том, что изображения, на которые ссылаются CSS, загружаются правильно. Я использую AppBundle по умолчанию, который поставляется с Symfony.

Моя файловая структура выглядит следующим образом:

symfony_root/
  app/
    Resources/
      public/
        css/
          style.scss
        js/
          script.js
        images/
          masthead-4.jpg

Я храню свои исходные файлы в symfony_root/app/Resources/public, а затем Assetic компилирует их и выводит в symfony_root/web/. Это происходит в моей конфигурации Assetic, которая выглядит следующим образом:

symfony_root/app/config/config.yml

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        [ ]
    #java: /usr/bin/java
    read_from:      %kernel.root_dir%/Resources/public/
    write_to:       %kernel.root_dir%/../web/
    filters:
        cssrewrite: ~
        sass: 
            apply_to: "\.scss$"
            bin: path_to_sass_which_works
        #closure:
        #    jar: "%kernel.root_dir%/Resources/java/compiler.jar"
        #yui_css:
        #    jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar"
    assets:
        bootstrap_js:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap-sass/assets/javascripts/bootstrap.js
        bootstrap_css:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap-sass/assets/stylesheets/_bootstrap.scss
            filters: [cssrewrite]

Теперь в моем файле layout.twig, который, как я понимаю, берет файлы css, определенные здесь, пропускает их через фильтры, как определено здесь или в config.yml, и выводит файлы в веб-каталог. У меня есть следующее:

symfony_root/app/Resources/views/layout.html.twig

{% stylesheets output='css/application.css'
  'css/style.css.scss'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}

Наконец, в моем файле style.css.scss у меня есть следующая проблемная строка:

.is--site_landing {
  background: transparent image-url('../images/masthead-4.jpg') top center no-repeat;
  background-size: cover;
}

URL-адрес изображения в css не найден и не отображается в браузере. Я пытался изменить URL-адрес в css на множество разных путей.

  • /images/masthead-4.jpg

/images/masthead-4.jpg

  • ../images/masthead-4.jpg

../images/masthead-4.jpg

  • топ-4.jpg

введите здесь описание изображения

Я также пытался добавить фильтр cssrewrite, когда таблицы стилей включены в файл layout.html.twig, но он изменяет css на неправильный путь, например:

 {% stylesheets filter='cssrewrite' output='css/application.css'
      'css/style.css.scss'
    %}

введите здесь описание изображения

Наконец, если я помещу изображение masthead-4.jpg в web/images/masthead-4.jpg, я смогу перейти к изображению через URL-адрес, и оно будет работать правильно. Кроме того, любые изображения, включенные в обычный тег изображения, на который ссылается Symfony, работают корректно. Это только изображения, включенные в CSS, на которые неправильно ссылаются.

Это работает:

      {% image 'images/masthead-4.jpg' %}
        <img class="img-circle hidden-xs" alt="Pass Rates" width="80" src="{{ asset_url }}" alt="Example" />
      {% endimage %}

Спасибо и любая помощь будет оценена по достоинству.


php symfony assetic
person Patrick    schedule 13.02.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Чего вам не хватает, так это cssrewrite фильтра. Кроме того, путь к вашим файлам css выглядит немного странно. Попробуйте что-то вроде (в вашем layout.html.twig)

{% stylesheets output='bundles/app/css/application.css'
  'bundles/app/css/style.css.scss'
  filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}

Проверьте здесь для получения более подробной информации.

person Tomasz Madeyski    schedule 13.02.2015
comment
Спасибо за вашу помощь, Томаш, но решение, которое вы упомянули, не сработало. Я изменил следующее в своем файле макета: {% stylesheets output='bundles/app/css/application.css' 'css/style.css.scss' filter='cssrewrite' %} В браузере фоновая ссылка делает не работает. Если я открою инспектор браузера, ссылка перечеркнута, однако, если я щелкну правой кнопкой мыши и открою ссылку в новой вкладке, появится ссылка: i.imgur.com/FVoWlT1.png - person Patrick; 13.02.2015
comment
Мой фоновый URL-адрес в моем файле CSS по-прежнему такой: background: Transparent image-url('../images/masthead-4.jpg') top center no-repeat; - person Patrick; 13.02.2015
comment
вы сбросили свои активы? app/console assets:install --symlink сделает это лучше всего. Путь ROOT_DIR/web/bundles/app/css/application.css существует? Проблема в вашем application.css или style.css - если стиль, попробуйте вручную скомпилировать css и поместить его в ROOT_DIR/web/bundles/app/css/style.css - возможно, это проблема компиляции scss - person Tomasz Madeyski; 13.02.2015
comment
Я сбросил свои активы. Вот результат, когда я выгрузил ресурсы: Установка ресурсов с использованием параметра печатной копии Installing assets for Symfony\Bundle\FrameworkBundle into web/bundles/framework Installing assets for Acme\DemoBundle into web/bundles/acmedemo Installing assets for Sensio\Bundle\DistributionBundle into web/bundles/sensiodistribution Не похоже, что в дампе учитываются ресурсы в ROOT_DIR/app/Resources/public. Вы знаете, почему это так? Это проблема? - person Patrick; 14.02.2015
comment
вы также использовали команду php app/console assetic:dump --env=prod --no-debug - person Baig; 14.02.2015