I want to include a .css and .scss file in a twig template, is it necessary to write is this way?
{% stylesheets filter="sass"
"css/proposal/edit.scss"
"bundles/bmatznerfontawesome/scss/font-awesome.scss"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% stylesheets
"bundles/simplemde/debug/simplemde.css"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
I dont like the redundant writing, but when I try to link the css file in the first block that is filtered for scss files it wont work.
Remove the filter attribute and add an 'apply_to' option in your config :
// app/config.yml :
assetic:
# ...
filters:
sass:
# ...
apply_to: ".scss$"
Then you can group everything in the first :
{% stylesheets
"css/proposal/edit.scss"
"bundles/bmatznerfontawesome/scss/font-awesome.scss"
"bundles/simplemde/debug/simplemde.css"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Related
My config.yml looks like so
framework:
templating:
engines: ['twig']
assets_version: 2
And my twig template has this
{% block stylesheets %}
{% stylesheets output='css/compiled/main.css'
'#AppBundle/Resources/public/css/bootstrap.min.css'
'#AppBundle/Resources/public/css/main.css'
%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset(asset_url) }}" />
{% endstylesheets %}
{% endblock %}
This works but the output has the version param twice.
/css/compiled/main.css?v=2?v=2
I have no idea why this is happening and I am not overriding the assets_version_format either. I even searched my whole project for it just in case.
This only occurs though in my production env, dev is fine and works correctly with just one query param.
It should be:
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
(do not put asset_url within an asset() function)
I have the following problem:
I included the CSS File from fancybox into my base.html.twig file:
{% block head_style %}
{% stylesheets
'../vendor/twbs/bootstrap/dist/css/bootstrap.min.css' filter='cssrewrite'
'#Bundle/Resources/public/css/site.css' filter='cssrewrite'
'#Bundle/Resources/public/css/jquery.fancybox.css' filter='cssrewrite'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock head_style %}
My directory is the following:
The Problem I'm fancing now is that fancybox can't find the fancybox_sprite.png,fancybox_overlay.png and fancybox_loading.gif.
Here's one of the paths in the jquery.fancybox.css:
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('../images/fancybox_sprite.png');
}
Here's the path that the browser is looking for:
http://project/Resources/public/images/fancybox_sprite.png
What I also found out is that the /images directory won't be loaded into the /web dir, but in the /bundles dir, though I used assets:install, assets:install --symlink and assetic:dump.
Why can't the system read the images or why aren't the images loaded into the /web dir?
I found a few Questions on SO about this, but neither of them helped me.
Do not use the #Bundle notation with cssrewrite, it is known to fail -- read the second notice here.
You should instead write the relative path to your css files from the web folder. Once you have exported your assets using bin/console assetic:install, your new base.html.twig should read:
{% block head_style %}
{% stylesheets
'../vendor/twbs/bootstrap/dist/css/bootstrap.min.css' filter='cssrewrite'
'bundles/something_online/css/site.css' filter='cssrewrite'
'bundles/something_online/css/jquery.fancybox.css' filter='cssrewrite'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock head_style %}
I'm creating small blog on Silex, using Twig for rendering views. Now I've got an error:
Unknown tag name "stylesheets" in "index.html" at line 5
Here is my stylesheet tag:
{% stylesheets '../css/main.css' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
As I understood, we can not use tag, because it's only Symfony2 approach and this tag related to AsseticBundle. So how I can include stylesheets without it?
The solution for me was:
{% block stylesheets %}
<link href="../css/main.css" rel="stylesheet" type="text/css" />
{% endblock %}
I wanted to add stylesheet with a variable inside
{% stylesheets combine=true
'#MyBundle/Resources/public/css/*'
'#MyBundle/Resources/public/XXX/css/*'
'#CramifCramifKitBundle/Resources/public/jquery/css/' ~ jquery_theme ~ '/jquery-ui-1.1.10.custom.min.css'
filter='cssembed'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
{% endstylesheets %}
but it is not possible to put variables in the {% stylesheets %} block.
so I decided to do that way :
{% stylesheets combine=true
'#CramifCramifKitBundle/Resources/public/css/*'
'#CramifCramifKitBundle/Resources/public/JQMenu/css/*'
filter='cssembed'
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
{% endstylesheets %}
<link type="text/css" rel="stylesheet" href="{{ asset('bundles/mybundle/jquery/css/' ~ jquery_theme ~ '/jquery-ui-1.1.10.custom.min.css') }}" />
of course I ran the command line : assets:install
The resources are in the web/bundles/mybundle folder, no problem
The problem is that the server returns a 404 error (the path is right thugh). More than that, when I type in the browser the url even to the bundles folder under web, same error 404
Maybe you can tell me another way to load css with dynamic paths
It's a known problem in Assetic :
try to replace #BundleName/Resources/public/ by bundles/names/{css, js, images or whatever}/*
in your {% stylesheets %} block
More informations here : https://github.com/kriswallsmith/assetic/issues/53#issuecomment-2523420
When I add a second file to my other file it seems to cause a 500 error on the first one.
{% stylesheets
'#MopaBootstrapBundle/Resources/public/less/mopabootstrapbundle.less'
'#MyTestBundleBundle/Resources/public/css/main.css'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
{% endstylesheets %}
Here is my assetic(it uses controller in dev):
assetic:
debug: %kernel.debug%
use_controller: false
#java: /usr/bin/java
filters:
cssrewrite: ~
less:
node: /usr/bin/node
node_paths: [/usr/lib64/node_modules]
apply_to: "\.less$"
If i remove the main.css it works fine. If I move main.css to a different stylesheets block it also works fine.
I think that you forget about filter attribute.
{% stylesheets '#MopaBootstrapBundle/Resources/public/less/mopabootstrapbundle.less' '#MyTestBundleBundle/Resources/public/css/main.css' filter='less,?yui_css'%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="screen" />
{% endstylesheets %}
Update.
I saw the apply_to: "\.less$" just now.
Split this block to 2 stylesheets
{% stylesheets '#...less' %}
<link href="{{ asset_url}}" ... />
{% endstylesheets %}
{% stylesheets '#...css' %}
<link href="{{ asset_url}}" ... />
{% endstylesheets %}
The issue was that my less in node was the issue. Switching this to the latest in github (1.3.1) fixed it.