Symfony2 - paths are wrong after 'compiling' SCSS --> CSS

Question

I have problem with paths in my CSS files. Below is my configuration and structure:

nginx conf:

listen  127.0.0.1:80;

location ~ ^/(app|app_dev|config)\.php(/|$) {

fastcgi_pass unix:/var/run/php5-fpm.sock;
fastcgi_split_path_info ^(.+\.php)(/.*)$;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param HTTPS off;
}

root /home/test/WWW/test/web;
server_name test.dev;

# strip app.php/ prefix if it is present
rewrite ^/app_dev\.php/?(.*)$ /$1 permanent;

location / {
index app_dev.php;
try_files $uri @rewriteapp;
}

location @rewriteapp {
rewrite ^(.*)$ /app_dev.php/$1 last;
}

access_log  /home/user/WWW/_logs/test_access.log;
error_log   /home/user/WWW/_logs/test_error.log;

/home/user/WWW/test/app/Resources/views/base.html.twig have lines like these:

{% block stylesheets %}
<link href="{{ asset('css/application.css') }}" media="screen" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block javascripts %}
<script src="{{ asset('js/application.js') }}" type="text/javascript"></script>
{% endblock %}

/home/user/WWW/test/app/config/config.yml have these:

assetic:
debug: %kernel.debug%
use_controller: false
bundles: ~
filters:
sass:
bin: /usr/local/bin/sass
cssrewrite: ~
assets:
application_css:
inputs:
- %kernel.root_dir%/../web/_stylesheets/application.scss
filters:
- sass
- cssrewrite
output: css/application.css

So I am using SASS with --scss parameter to compile scss files to css, using Symfony2 filter setting. The structure for the project files I'm interested in is:

TEST
|
---"_stylesheets" ("application.scss" file inside)
|
---"css" ("application.css" file inside)
|
---"images" ("bg.png" file inside)

The "application.scss" is in "_stylesheets" folder.
The "css" is the folder used for compiled scss (so CSS) files.

The problem I have is: a certain lines in "application.css" are as follows:

body {
background: url("../images/bg.png");
}

When I run a page that this image should be shown on, Im facing similar 404 error:

"NetworkError: 404 Not Found - http://test.dev/images/bg.png"
(although the path shown with the error is visually correct)

I tried placing the image and even the CSS file in the bundles Resources folder (/public/scss and public/images), with no effect - it showed the same problem with path, so the path was correct but no image found (404) while the image exists.

Can someone advise me what is wrong here, or what to change to make it work properly? I'm trying to solve this since a week already. Googling, searching, reading, testing.. no results.

elvis_ef elvis_ef · Accepted Answer · 2014-12-03T23:00:08

I was able to solve my problem partially anyway.. I.e. when I put for instance "test.png" file into MyBundle/Resources/public/images/, then run a command: php app/console assetic:dump (which renders it in: /web/images/test.png), then the path in the CSS file like "../images/test.png" works like a charm. But if the source image is in the for example: http://aaa.aaa.com/_stylesheets/, then the rendered file (though it's rendered in the /web/ folder) is not recognized by the CSS's "background url". Why is that?

Symfony2 - paths are wrong after 'compiling' SCSS --> CSS

1 Answers