I am using symfony3 as a newbie. I have installed sass on my fedora system and I try to use the sass filter to convert my scss files into css. I use the assetic bundle.
I have created an assets dir in web which contains a scss and a css dir.
My config.yml contains the following:
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
cssrewrite: ~
jsqueeze: ~
sass: ~
compass: ~
My twig template include the following:
{% block stylesheets %}
{% stylesheets filter="sass" output="assets/css/app.css"
"%kernel.root_dir%/../web/assets/scss/main.scss"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
<link rel="stylesheet" href="{{ asset('assets/css/app.css') }}">
{% endblock %}
After having launched
php bin/console assetic:watch
each time I bring a change in main.scss, .css files are generated in web/assets/css (app.css, app_main_1.css) but they are absolutely empty.
If I run
sass web/assets/scss/main.scss web/assets/css/app.css
a valid css file is generated.
Could somebody help me understanding what is wrong?
Giving the full path to sass and compass in the configuration file solves the problem.
Related
From a personal symfony 3 project, I want use the font-awesome library. In the config.yml file I added an asset like that :
awesomefont_css:
inputs:
- '%kernel.root_dir%/../web/library/font-awesome/css/font-awesome.css'
I call the asset from my index.php page :
{% stylesheets output="stylesheet.css"
'#bootstrap_css'
'#awesomefont_css'
"#style_css"
%}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
I cleared caches (via php bin/console cache:clear) but when I load my php page, I get the errors :
I understood the library font-awesome need use some another files. My question is : how can/must I add properly theses anothers files in a symfony 3 ?
Thanks !
I add samples symbolic links from mywebsite/web/library/font-awesome/fonts/* to mywebsite/web/fonts . I don't know if there is a better solution but I don't find another and that work
I included fortawesome/font-awesome via composer.
Then, you have to add additional entries to your config.yml:
fontawesome_css:
inputs:
- '%kernel.root_dir%/../vendor/fortawesome/font-awesome/css/font-awesome.css'
filters: [cssrewrite]
font-awesome-otf:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/FontAwesome.otf'
output: 'fonts/FontAwesome.otf'
font-awesome-eot:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.eot'
output: 'fonts/fontawesome-webfont.eot'
font-awesome-svg:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.svg'
output: 'fonts/fontawesome-webfont.svg'
font-awesome-ttf:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.ttf'
output: 'fonts/fontawesome-webfont.ttf'
font-awesome-woff:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.woff'
output: 'fonts/fontawesome-webfont.woff'
font-awesome-woff2:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/fonts/fontawesome-webfont.woff2'
output: 'fonts/fontawesome-webfont.woff2'
then only include the fontawesome_css (as you did already):
{% block stylesheets %}
{% stylesheets '#bootstrap_css' '#fontawesome_css' '#custom_css' %}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"/>
{% endstylesheets %}
{% endblock %}
Finally, run
bin/console assetic:dump
and you're done! It is not necessary to mention the font files in your template, they are copied automatically.
I should add that the webpack/encore package is new and much better in my opinion! It replaces assetic.
You can also easily customize your bootstrap theme on the fly with this tool.
In one of my Symfony projects I am using assetic for asset managment.
All my twig files extend a base file called base.html.twig. I This file (base) I have:
{% stylesheets output="css/compiled/main.css" filter='cssrewrite'
'../vendor/bootstrap/css/bootstrap.css'
'css/general.css'
'css/navigation.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
In the other files that extend the base file I override the stylesheets block so that I can add other css files. This is what I do:
{% block stylesheets %}
{{ parent() }}
{% stylesheets output="css/compiled/main.css" filter='cssrewrite'
'bundles/account/css/signup.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Now the problem is that signup.css is never added in main.css and so are all the other files that are not in the stylesheet block in the base file.
I don't know why but this started happening when I swtiched to prod environment (it was working fine in dev). I've done, as recommending on Symfony's website:
php app/console assetic:dump --env=prod --no-debug
One other thing, it seems that I can't swtich back to dev mode even when I'm using app_dev.php
Do you guys have any idea of where these errors could come from ?
Thank you in advance for you help,
kimimsc
Your have a conflict with your 'option' attribute. So in prod environnement, the second stylesheet overwrite the first.
You must use another output value for signup.css (or don't use this option)
Assetic management is the hardest part to understand IMHO, even after playing a year or more with Symfony. Anyways, I was experimenting with named assets:
assets:
mybundle_front_js:
inputs:
- #MeMyBundle/Resources/public/jquery/dist/jquery.js
- #MeMyBundle/Resources/public/bootstrap/js/affix.js
- #MeMyBundle/Resources/public/bootstrap/js/alert.js
- #MeMyBundle/Resources/public/bootstrap/js/button.js
- #MeMyBundle/Resources/public/bootstrap/js/carousel.js
- #MeMyBundle/Resources/public/bootstrap/js/collapse.js
- #MeMyBundle/Resources/public/bootstrap/js/dropdown.js
- #MeMyBundle/Resources/public/bootstrap/js/modal.js
- #MeMyBundle/Resources/public/bootstrap/js/tooltip.js
- #MeMyBundle/Resources/public/bootstrap/js/popover.js
- #MeMyBundle/Resources/public/bootstrap/js/scrollspy.js
- #MeMyBundle/Resources/public/bootstrap/js/tab.js
- #MeMyBundle/Resources/public/bootstrap/js/transition.js
filters: [?uglifyjs2]
Using the named asset:
{% block javascripts %}
{% javascripts
"#mybundle_front_js" %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
Dumping them:
php app/console cache:clear --env=prod
php app/console assetic:dump --env=prod
Result is two files, same size same content:
%kernel.root_dir%/../web/assetic/mybundle_front_js.js
%kernel.root_dir%/../web/js/055a364.js
Is there any reason to produce two identical files in prod environment?
The first file assetic/mybundle_front_js.js is the resulting file from configuring the named asset. The second file is the resulting file used from the assetic block inside your template.
If you would use two assets in your assetic block:
{% block javascripts %}
{% javascripts
"#mybundle_front_js"
"#whateveer" %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
you would end up with two named assets files in the assetic/ folder, and one file in the js/ folder containing the contents of the both files.
Guessing why there are also the files in the assetic/ folder: You can configure named assets and reference to them cleanly without using the {% javascripts %} block.
I have a question about symfony2 and bootstrap. I dont understand why I can load icons image from environment "prod" but not from environment "dev". In dev, i get this error.
The route is "GET /img/glyphicons-halflings.png".
Image web/img/glyphicons-halflings.png is a symbolic link to ../../vendor/twitter/bootstrap/img/glyphicons-halflings.png
I get this error with
http://my.web.site/app_dev.php/img/glyphicons-halflings.png
And get image with
http://my.web.site/img/glyphicons-halflings.png
UPDATE
I include bootstrap in this way:
{% stylesheets '%kernel.root_dir%/../vendor/twitter/bootstrap/less/bootstrap.less' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
When I use in prod this works
<span class="icon-edit"></span>
And I have this assetic configuration:
assetic:
debug: %kernel.debug%
use_controller: false
bundles: [ MyAwesomeBundle ]
filters:
lessphp:
file: %kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php
apply_to: "\.less$"
I've also tried to create my collection:
assetic:
assets:
senso:
inputs:
- '../img/glyphicons-halflings.png'
outputs:
- 'img/glyphicons-halflings.png'
filters:
- ?lessphp
:dump create web/assetic/senso.png and web/assetic/senso_glyphicons-halflings.png but, ... how can works with senso*.png image?
config.yml
assetic:
use_controller: false
filters:
lessphp:
file: "%kernel.root_dir%/../vendor/leafo/lessphp/lessc.inc.php"
assets:
img_bootstrap_glyphicons_black:
inputs:
- "%kernel.root_dir%/../vendor/twitter/bootstrap/img/glyphicons-halflings.png"
output: "img/glyphicons-halflings.png"
img_bootstrap_glyphicons_white:
inputs:
- "%kernel.root_dir%/../vendor/twitter/bootstrap/img/glyphicons-halflings-white.png"
output: "img/glyphicons-halflings-white.png"
css_bootstrap:
inputs:
- "%kernel.root_dir%/../vendor/twitter/bootstrap/less/bootstrap.less"
output: "css/bootstrap.css"
filters:
- lessphp
js_bootstrap:
inputs:
- "%kernel.root_dir%/../vendor/twitter/bootstrap/js/*.js"
output: "js/bootstrap.js"
config_dev.yml
assetic:
use_controller: true
template
{% stylesheets '#css_bootstrap' %}
<link href="{{ asset_url }}" rel="stylesheet" type="text/css"/>
{% endstylesheets %}
{% javascripts '#js_bootstrap' %}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
after running assetic:dump --no-debug everything works flawlessly.
general info
the cssrewrite filter used i.e. for background-image: url("..") is incompatible with the #Bundle-syntax.
{% stylesheets
'#AcmeYourBundle/Resources/public/css/your.css'
filter="cssrewrite"
%}
doesn't work.
Furthermore, sources like url("../img/image.png") will fail in dev environment without cssrewrite and assetic.use_controller: true - possible workaround: use urls like url("/img/image.png") but not working with pages in subfolders.
you should keep in mind that ...
<img src="img/image.png">
... will for hostname/app_dev.php/ and all other routes except hostname/.
solution:
<img src="{{ asset('img/image.png') }}">
other solutions & tips
when including img,css or js into your page always use twig's asset(), {% stylesheets %} or {% javascripts %} function.
use relative urls in stylesheets i.e. url("../img/image.png")
try setting assetic.use_controller: false in your config_dev.yml and dump your assets ... as described here
create asset collections in config.yml, then dump your assets - see my answer here.
use the cssembedded filter to include your images in css using data-uris - reference here
configure your webserver to directly serve files inside img/css/js folders instead of routing through symfony
use a different hostname (i.e. project.dev ) for the dev environment using app_dev.php as directory-index resulting in url's without /app_dev.php/
you can find some good information about this topic in the answers to this question.
my personal workflow:
local wildcard dns server introducing automatically generated urls like project.dev , project.prod , ... ( no /app_dev.php/ problems )
creating asset collections in config.yml ( cleaner templates, more control over assets )
guard / grunt taskrunners instead of assetic:dump --watch ( re-dump on change but test and optimize aswell )
source-maps and chrome-devtools instead of assetic's assetic:dump --debug ( see the real source files for combined files,less,sass,coffeescript, ... )
tincr ( to save directly from devtools ) and livereload ( see changes instantly )
I have this:
ShopBundle
Controller
Resources
public
images
marker.png
views
Default
index.html.twig
In my index.html.twig, I'd like to have this
<img src="{{ asset("images/marker.png") }}"/>
And I'd love people using my bundle who just want to use their own marker.png to just have to build a bundle inheriting mine and place their image just by following files structure:
MyShopBundle
Resources
public
images
marker.png
Is there any simple way to do this in Symfony2 ? The need seems so simple that I can't believe I didn't find answers already.
So,
How do you include an image asset in your bundle template from your bundle resources directory ? I already did a ./apps/hfr/console assets:install web but my template does not print the right url (/images/marker.png instead of /bundles/ShopBundle/Resources/public/images/png)
Is it possible to override the way I want or did I lost my way ?
Solution:
use the # syntax ...
{% image '#VendorMyShopBundleBundle/Resources/public/images/example.jpg'
output='/images/example.jpg' %}
<img src="{{ asset_url }}" alt="Example"/>
{% endimage %}
Please note that Vendor/YourBundle/Resources/public will NOT be accessible by your web server normally.
The assets:install command will therefore copy the assets to web/bundles/vendoryourbundle
The {{ asset('path/to/asset.jpg') }} function will adjust the url of your asset if youre using the dev environment:
http://hostname/app_dev.php
from
/path/to/asset.jpg
to
/app_dev.php/to/asset.jpg
[EDIT]
if you want more control over the assets maybe consider using asset collections.
You can configure them as follows:
# app/Resources/config/config.yml
assetic:
[...]
assets:
css_bootstrap:
inputs:
- %kernel.root_dir%/../src/Vendor/YourBundle/Resources/public/twitter-bootstrap/less/bootstrap.less
- [...]
filters:
- lessphp
- [...]
output: css/bootstrap.css
my_image:
inputs:
- %kernel.root_dir%/../path/to/image.png
filters:
- optipng
output: images/image-with-new-name.png
and use them afterwards in your template like this:
{% stylesheets '#css_bootstrap' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}">
{% endstylesheets %}
I am NOT sure right now if the assetic/assets/packagename/inputs configuration array supports the #VendorYourBundle syntax aswell and then uses bundle inheritance though.
Addition:
Before you can use these packages you will have to use the console command:
php app/console assetic:dump