I'm really impressed by how easy it is to use sass and compass in dev mode and generate the css in a single file when passing to production.
But like many on the web, I still have one problem. The import of the image inside the scss file like
#somedomid {
background:url('../images/test.jpg');
}
I read all the questions, all the answers, I read also some really good tutorial on it but I begin to realize that there is only workaround and no one has a proper solution that :
- Use the symfony bundle (I can take the bundle as it and import it in another project -> no file in shared folder)
- Use assetic with the bundle path
- Import the image in css
- Have the same behaviour in dev and prod mode.
For the moment I work with the following files :
config.yml
# Assetic Configuration
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: [MyBundle]
ruby: %ruby.bin%
write_to: %kernel.root_dir%/../web/
...
filters:
cssrewrite: ~
sass:
bin: %sass.bin%
compass:
bin: %compass.bin%
...
And a twig like this :
{% stylesheets filter='compass' output='css/main.css'
'@MyBundle/Resources/assets/sass/*.scss' %}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
When I ask a page with app_dev.php the css is correctly generated and called and when I deploy on server I make a assetic:dump and the css is perfectly generated and called too.
But even if I use cssrewrite filters, there is no way to get the image and I always get a 404 on :
app_dev.php/images/test.jpg
or
/Resources/assets/images/test.jpg (with cssrewrite)
Where can I put this image in my bundle to be moved in execution time to the right folder ?
Sorry for the long post and please, don't give me another workaround, I'm looking for the right solution.
