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

Question

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

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

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

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

symfony_root/приложение/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/приложение/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

• топовый-4.jpg

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

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

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

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

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

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

Answer 1

Что вам не хватает - 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 %} 

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