It's my first time using Symfony so I don't know if I'm messing everything up or what but I can't seem to get compass spriting working on my project apparently.
This is what I have on my scss files:
#import "compass";
#import "compass/css3";
#import "compass/utilities/sprites";
#import "icons/*.png";
#include all-icons-sprites;
And I don't see any errors when compiling de sass but the icons are nowhere to be found and the css generated is something like:
.icons-sprite, .icons-icon01, .icons-icon02 {
background: url("/images/icons-sf92f9256db.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
On my config.yml file I have this:
assetic:
debug: "%kernel.debug%"
use_controller: false
filters:
cssrewrite: ~
sass: ~
compass:
bin: '/usr/bin/compass'
apply_to: "\.scss$"
http_path: /
images_dir: %kernel.root_dir%/../src/Es/DolceVitaBundle/Resources/assets/images
generated_images_path: %kernel.root_dir%/../web/images
http_generated_images_path: /images
parameters:
assetic.filter.compass.images_dir: %kernel.root_dir%/../src/Es/DolceVitaBundle/Resources/assets/images
assetic.filter.compass.http_path: /images
And my icons folder (with the original png files that I want to use for the sprite) is in /Myprojectfolder/src/src/Es/DolceVitaBundle/Resources/assets/images
The folder in /Myprojectfolder/src/web/images is empty
EDIT:
More info: I did app/console assetic:dump --watch and the css files were generated fine
And my styleshhets are added like this:
{% stylesheets output='css/*.css' filter="compass"
"#EsDolceVitaBundle/Resources/assets/scss/style.scss"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Well, apparently something was off, maybe the cache, but the rest of my config was ok. I did the rest of my css and commented the icons part and after working for a day I uncommented to look at the issue again and the sprite showed up perfectly.
Don't forget to add to your parameters.yml:
assetic.filter.compass.generated_images_path: %kernel.root_dir%/../web/images
Related
I'm trying to implement some small project into symfony2.5,
when I have added the the configurations of the compass to my config file and installed all the needed packages (ruby,sass,compass) though when I'm trying to assetic:dump the css I get the following
Error Output:
Error: File to import not found or unreadable: compass.
Load path: /path/to/project/CoreBundle/Resources/public/css
on line 6 of /tmp/assetic_sassE4kCr8
if I remove the #import "compass"; I still get the same problem with the #import "compass/css3"; AND the #import "compass/utilities/sprites";
in my config.yml I get the assetic set like the following:
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: [ FundCoreBundle ]
filters:
scss:
bin: "/usr/local/bin/sass"
compass:
bin: "/usr/local/bin/compass"
my css creation is as the following:
{% stylesheets
'#FundCoreBundle/Resources/public/css/style.scss'
filter='compass'
output='css/*.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
and my scss file is as the following
/* Compass utilities*/
// Use one CSS3 mixin instead of multiple vendor prefixes.
// #import "compass/support";
// #import "compass/reset";
#import "compass/css3";
#import "compass";
// See http://compass-style.org/help/tutorials/spriting/
#import "compass/utilities/sprites";
// Helps set up a vertical rhythm.
// #import "compass/typography/vertical_rhythm";
// Sass utilities
#import "helpers/variables";
#import "helpers/mixins";
// Vendors and external stylesheets
// #import "vendors/mmenu/jquery.mmenu";
#import "vendors/bootstrap/bootstrap";
// Base stuff
#import "base/typography";
#import "base/normalize";
#import "base/main";
what is the right way to import compass +ccs3 + sprites to the symfony project?
How to include css font icon libraries istalled via composer in /vendor dir (fontawesome for example). Include:
{% stylesheets filter='cssrewrite'
'%kernel.root_dir%/../vendor/fortawesome/font-awesome/css/font-awesome.min.css' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet"/>
{% endstylesheets %}
But it does't rewrite font files url, it stays same, and icons wont load:
src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
I know, we can't make urls poined outside of webroot, but maybe assetic can put this dependencies to /web automatically?
The only way I see for now is to copy this assets to /web dir with post-install composet script, but I'd like to find a better way.
Thanks!
Asked on the #symfony channel and the only answer I've got to use assetic with font-awesone was to include them in the config.yml under assetic. The original code is the following:
assetic:
java: /usr/bin/java
use_controller: false
bundles: [ CorvusFrontendBundle, CorvusAdminBundle ]
assets:
font-awesome-otf:
inputs: '%kernel.root_dir%/Resources/public/fonts/FontAwesome.otf'
output: 'fonts/FontAwesome.otf'
font-awesome-eot:
inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.eot'
output: 'fonts/fontawesome-webfont.eot'
font-awesome-svg:
inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.svg'
output: 'fonts/fontawesome-webfont.svg'
font-awesome-ttf:
inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.ttf'
output: 'fonts/fontawesome-webfont.ttf'
font-awesome-woff:
inputs: '%kernel.root_dir%/Resources/public/fonts/fontawesome-webfont.woff'
output: 'fonts/fontawesome-webfont.woff'
filters:
cssrewrite: ~
yui_js:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.8.jar
lessphp:
file: "%kernel.root_dir%/../vendor/oyejorge/less.php/lessc.inc.php"
apply_to: "\.less$"
Then calling the css file as follow:
{# Common Stylesheets #}
{% stylesheets filter="?cssrewrite"
'%kernel.root_dir%/Resources/public/css/font-awesome.min.css'
'#CorvusCoreBundle/Resources/public/css/common.less'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
And finally dumping the files. However, and in my experience, I get duplicate files for the fonts themselves. I am probably doing something stupid.
HTH,
Tam
credit: https://gist.github.com/ilikeprograms/a8db0ad7824b06c48b44
Update June 2015: The answer was posted for version 2.1/2.3 of Symfony2. This answer might apply or not to the most current version: you will have to check
Great answer above but for occasions when your font's aren't stored in the app directory the above won't work. My CSS files are kept in my own bundle, so to make sure they are found I needed to configure my app/config/config.yml like so;
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles:
- AjtrichardsAdminBundle
- AjtrichardsMainBundle
assets:
font-awesome-ttf:
inputs: '#AjtrichardsMainBundle/Resources/public/fonts/icons.ttf'
output: 'fonts/icons.ttf'
font-awesome-woff:
inputs: '#AjtrichardsMainBundle/Resources/public/fonts/icons.woff'
output: 'fonts/icons.woff'
I use Symfony 2.4 and i installed the bundle MopaBootstrap.
less say: NameError: variable #icon-font-path is undefined in glyphicons.less on line 13, column 8. It's a mopabootstrap file.
I extend 'MopaBootstrapBundle::base_initializr.html.twig'. I have no particular code, it's a new project.
Less work great for all my code, except the bootstrap glyphicons file.
Any idea ?
Edit: There is an open issue there if you have some ideas: https://github.com/phiamo/MopaBootstrapBundle/issues/839#issuecomment-39893655
I removed 'apply_to: ".less$"' in config.yml and added the less filter to my twig tags. Now assetic:dump --watch seems to work fine.
config.yml
assetic:
debug: %kernel.debug%
use_controller: false
filters:
less:
node: /usr/local/bin/node
node_paths: [/usr/local/lib/node, /usr/local/lib/node_modules]
apply_to: "\.less$" <<<<< Remove this line
Base.html.twig
{% stylesheets
'#MopaBootstrapBundle/Resources/public/less/mopabootstrapbundle.less'
filter='less' <<<<< Add this line
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
{% endstylesheets %}
I know this has been asked a few times before but I'm still having trouble getting my CSS background images to work with assetic.
I've read Path of assets in CSS files in Symfony 2 and all my background images are set to ../images in my CSS:
background: url(../images/icons/icon.png)
And in my twig files as:
{% stylesheets 'bundles/commondirty/css_original/c.css' filter="cssrewrite" %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css" />
{% endstylesheets %}
I've tried clearing all my cache stuff with:
php app/console cache:clear --env=prod --no-debug
rm -rf app/cache/*
rm -rf app/logs/*
Then as stated in the above answer:
php app/console --env=prod assets:install web
php app/console assetic:dump --env=prod
This works locally ('app.php', 'app_dev.php', and '/'), but as soon as I upload the files to production it fails to load background images.
Both local and production CSS is as follows so I don't understand why it doesn't work?
url("../../bundles/main/images/icons/lrg_coin.png")
Permissions? Do I need to reload/clear something?
Edit
cached CSS files on dev and prod are pointing to:
url(../../bundles/main/images/icons/lrg_coin.png) when I'm guessing it needs to be ../ not ../../? How can this be changed?
Ok, I figured what I was doing wrong so thought I'd post for future reference. I had use_controller set to false in my prod_config.yml which was overriding my config.yml settings (which dev_config.yml uses)
assetic:
use_controller: false
Changing this to true and clearing/reloading everything as stated in my question solved the issue. I knew it was something simple.
I include my CSS with the following code:
{% stylesheets 'bundles/majorproductionssewingdivasite/css/*.css' filter='cssrewrite' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
In dev, this allows me to use image sprites without any problems. The resulting URL to my sprite is:
http://localhost/diva/web/bundles/majorproductionssewingdivasite/images/diva-sprites.jpg
But, in prod, it gets mapped to:
http://localhost/diva/bundles/majorproductionssewingdivasite/images/diva-sprites.jpg
Notice the lack of web directory.
The generated code in the CSS file is as it should be, and all my CSS (both the dev 'chunks' and the finalized prod assetic dump) are at web/css/. Any ideas as to why the prod environment is skipping the web directory?
EDIT: what's weird is that both dev and prod generate the same URL in the CSS itself:
url('../../bundles/majorproductionssewingdivasite/images/diva-sprites.jpg')
Solution is to dump the assets in the prod environment:
$ app/console assetic:dump --env=prod
Remember to Clear the Cache
php app/console cache:clear --env=prod --no-debug
berore
php app/console assetic:dump --env=prod --no-debug
Also remember to appropriate configure assetic, in your config_prod.yml set as below:
assetic:
use_controller: false
Edit:
As said in Symfony docs (actually in chapter refers to dev environment): tell Symfony to stop trying to process these files dynamically
In debug mode, Assetic 1.1 also seems to rewrite CSS even when it's not in the {% stylesheets %} tag. So it's worth checking that's there when you turn off debug in production.