I have been trying to figure out how to get assetic working with my CSS sources but am having no luck. Two articles I've been tyring to cross-reference are combining and minimising ccs files and assetic asset management. However, the hybrid I've ended up with is the below which isn't working:
{% stylesheets filter="scssphp" output="css/my.css"
"http://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
"bundles/app/css/*"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
However, when I try running (in Dev) I get an error saying:
Unexpected token "name" of value "rel" in base.html.twig at line 19
PS I have installed leafo and jsqueeze (I have javascripts to do figure out next) with:
$ composer require leafo/scssphp
$ composer require patchwork/jsqueeze:"~1.0"
You have here an error in your code:
{% stylesheets filter="scssphp" output="css/my.css"
"http://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet" type="text/css">
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"
"bundles/app/css/*"
%}
in every line you have a file that should be rendered. In the second line you have added rel and type. you have to delete that both parameters otherwise its an option for stylesheets. If you delete them it should work.
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.
I have some troubles loadings my css sheets with Symfony.
I'm using this in app\Resources\views\base.html.twig to load ccs files in web\bundles\app\css :
{% block stylesheets %}
{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Doing this throw an exception : "Unable to generate a URL for the named route "_assetic_2c8c367_0" as such route does not exist.") in base.html.twig at line 10
This works, css load and no exception thrown :
{% block stylesheets %}
<link rel="stylesheet" href="bundles/app/css/bootstrap.css">
{% endblock %}
Can someone help me understand why the first code dosn't works ? I haven't used Symfony since 6 month but I'm sure that's how I used to load css.
Here is the doc about it.
Try to empty your web/bundles folder first then run php app/console assets:install web/ --symlink and continued by php app/console assetic:dump
If the errors still occurs, try to recheck every css files included
Maybe I don't understand it. My main template is: app/Resources/view... But where should be css/js/img ? In my opinion in: app/Resources/view/public/... Because it isn't files bundles and all project in production environment. In my case "frontend page".
Of course, when the files(css/js/img) belongs to bundle is in appropriate bundle.
Now I have:
{% stylesheets '../app/Resources/views/public/css/*' %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
Assetic Add file located in app/Resources/js
But don't see images files.
How according to the standard symony2, I should store and manage "main" template files?
I would like to safely and well. I learn the symfony2.
All "web assets resources" should be place into web folder (that is made for all files "reachable" from the www).
You only need to run php app/consolle assets:install(*) to let symfony place all of your assets in the right place
When you want to use them simply use
<link href="{{ asset('bundles/yourbundlename/css/style.css') }}" type="text/css" rel="stylesheet">
(or whatever you have called your files)
(*) you can choose even the --symlink option to avoid file copies
All the images CSS js file should be kept in /web folder and can be used
{% stylesheets '/css/*' %}
<link href="/abc.css" type="text/css" rel="stylesheet" />
{% endstylesheets %}
or should be kept in bundle and you have to assetic dump them.
{% javascripts '#AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
kindly refer the below link for the same:
http://symfony.com/doc/current/cookbook/assetic/apply_to_option.html
I am working on a Symfony2 application. I am customising the layout.html.twig file from the FOSUserBundle.
Any HTML changes I make within the file are immediately obvious when I reload the page in the browser.
I am using assetic to link to my CSS and JS files. They appear to have linked successfully, the files contents load when I click on their paths from within the source of the web page.
However the CSS classes I have specified on the elements of the page don't seem to be appearing with their styles applied. I can't figure out why this is.
Here is the syntax I've used to link to the JS and CSS:
{% javascripts
'bundles/sysdevpunctuality/js/jquery-2.1.1.min.js'
'bundles/sysdevpunctuality/bootstrap-3.2.0-dist/js/bootstrap.min.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<!-- Bootstrap -->
{% stylesheets 'bundles/sysdevpunctuality/bootstrap-3.2.0-dist/css/bootstrap.css' filter='cssrewrite' %}
<link rel="stylesheets" href="{{ asset_url }}" media="screen" />
{% endstylesheets %}
Appreciate any tips on how I can go about debugging this issue.
I had the same problem, try this syntax:
{% block stylesheets %}
<link href="{{ asset('bundles/sysdevpunctuality/bootstrap-3.2.0-dist/css/bootstrap.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}
Of course don't forget to install assets:
php app/console assets:install web --symlink
i cant comment but my suggestion is check the page source of the generated webpage, then you can check the directory where symfony is looking for the resources.
I'm using KnPUniversity's video tutorial on Getting Started with Symfony2, and everthing's been going good except the video is teaching based off of version 2.0.3 and I am using 2.1.x-dev. When I get to a certain point in the video, it directs me to write code block #1 then modify it to more efficiently use code block #2, except code block #2 doesn't work. It doesn't throw any errors, it just fails to actually detect the stylesheets. In the source code of the page, there are zero references to any css style sheets using code block #2. Any idea what I'm doing wrong?
{# this causes the page to be styled and works fine #}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('bundles/event/css/event.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/event/css/events.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/event/css/main.css') }}">
{% endblock %}
.
{# this causes the page to be unstyled. Missing stylesheet links in page source #}
{% block stylesheets %}
{% stylesheets
'bundes/event/css/*'
filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
{% endblock %}
Well, I had a typo. It's not "bundes" it's "bundles". Problem solved and I'm an idiot.
When you use {{ asset() }} it creates a link to your web (public) directory.
But for the second part Assetic manages the css files - so it looks for the file inside your application and then writes it out into your web directory.
To fix your problem you can change your stylesheets like this:
{% stylesheets
'%kernel.root_dir%/../web/bundes/event/css/*'
filter='cssrewrite'
%}
But I suggest reading more about assetic to understand how you should be managing your css files Symfony 2 Assetic