I've added
"twbs/bootstrap" : "3.3.5",
"components/jquery" : "2.1.4"
to my composer.json file.
I've run composer:update with no problems.
However now it's time to use assetic to create the files and composer used symlinks to install the components and twbs folders.
In the ::base.html.twig I would write something like the following...
{% block stylesheets %}
{% stylesheets filter = 'cssrewrite'
'%kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/boostrap.css'
'%kernel.root_dir%/../vendor/twbs/bootstrap/dist/css/bootsrtap-theme.css'
'#AppBundle/Resources/public/css/custom.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
however the path for the rewrite is not correct because of the symlink installed by composer...
My question: Where did the files actually go?
Or is there another syntax to get at the files in twig?
I guess I need this... '%kerner.root_dir%/path/to/the/files'
every thing that you install through composer json goes to vendor folder (outside web folder)
you should check under web/bundles/ folder if you are in a linux or osx OS, if you are under windows, i don't think you'll have symlinks (so probably it's a hard copy each time you make a composer update). anyway. i think you should never use %kernel.root_dir% on twig.
in my case one of the bundles i'm using are symlinked under web/bundles to the real folder. as example guzzle :
lrwxrwxrwx 1 odin odin 88 ago 9 13:47 guzzle -> ../../vendor/eightpoints/guzzle-bundle/EightPoints/Bundle/GuzzleBundle/Resources/public/
so probably the path you should be using is:
bundles/twbs/bootstrap/css/boostrap.css
bundles/twbs/bootstrap/css/boostrap-theme.css
bundles/yourbundle/css/custom.css
and instead of using the public folder of app, at least in the documentation recomends adding css, js, and img folder inside web (if you are using them in more than one bundle)
I think you just need to do a php app/console assetic:dump in the terminal to dump the required assets into your web folder where they'll be publicly accessible to reference in your code.
Related
I would like to use Sass based styles in my Symfony 2.7 WebApp. So far I have used Compass to compile Sass files (located not in the web/ dir but within the Bundles) to CSS files. This works fine, but on a new server Ruby is not available and thus Compass is not an option anymore.
Following the Symfony Docu, I have added leafo/scssphp to the project and activated in the config file:
# app/config/config.yml
assetic:
filters:
scssphp:
formatter: 'Leafo\ScssPhp\Formatter\Compressed'
# ...
The Sass files within the Twig templates:
{% stylesheets
'MyMainBundle/Resources/styles/sass/header.scss'
filter="scssphp"
output="css/header.css" %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
When using the debug front controller app_dev.php a page refresh shows, that the header.css is correctly link, but the linked file is empty.
The header.scss contains pure Sass (no Compass function), the path is correct and no error is displayed. So, why is the header.css empty?
Dumping the assets instead of using app_dev.php does not solve the problem as well. The console shows all assets that are created during the dump, but not any sign of the header.css
php app/console assetic:dump --env=prod --no-debug
I tried different other possibilits to specifiy the path of the header.scss, but the result is always the same. Only using the #Bundle notation results in an NotFoundException.
{% stylesheets
'#MyMainBundle/Resources/sass/header.scss'
...
It does not make any difference if the Sass files are located inside a bundle directory or inside the web/ folder (as described in the Symfony docs).
So: How to integrate the Sass file directly into Symfony by using Assetic?
I solved the problem. Maybe the solution is useful for others as well:
My AsseticBundle / Assetic version was outdated. After updated to the latest version everything works fine.
I want to include css and js files from a library in my vendor directory into Twig.
I downloaded morrisjs via composer into my vendor directory of symfony. Now I want to include the main css und js files into my Twig Template. But as far as I know the asset function only works with files that are located in Bundles.
The files I want to include are located in the following paths:
project\vendor\morrisjs\morris.js\morris.js
project\vendor\morrisjs\morris.js\morris.css
I thought about some theoretical code that would look like that:
{% block stylesheets %}
<link href="{{ asset('vendor/morrisjs/morris.js/morris.css') }}" />
{% endblock %}
Is there any possibility to include these files directly from vendor and how when not?
If morrisjs is a frontend javascript library then install it via npm or bower.
Packages installed via composer should have all their public assets in Resources/public so you can publish them using:
$ php bin/console assets:install target [--symlink]
Then in a twig template use just:
<link href="{{ asset('bundles/acmedemo/css/contact.css') }}" rel="stylesheet" />
After installing new packages, run:
php app/console assets:install web
'web' being your server's document root(public_html or whatever it is).
You also need to dump your assets:
//for dev
php app/console assetic:dump
//for prod
php app/console assetic:dump --env=prod --no-debug
In your servers public root, you will have directory /bundles/ where all your files will be present, and you can easily include them in Twig with {{ asset('bundles/morri..) }}
Read up on combining assets, something you will need at some point.
I've put a css file in MyDirectoryBundle/Resources/public/css.
I then linked to it using:
<link href="{{ asset('css/main.css') }}" type="text/css" rel="stylesheet" />
I checked if it worked
short test: body {color: #FF0000;}
Nothing changed.
The parent layout (layout.twig.html) is in app/Resources/views (3 level architecture).
I still don't understand why:
css does not work
why the command: php console assets:install web/ --symlink fails
-> answer: The target directory web does not exist. (it does exist, actually).
I am quite new to symfony2 (2 weeks practice only).
I am working on Windows - just in case this may explain something...
Thank you very much for your help!
If the file first lived in MyDirectoryBundle/Resources/public/css, it'll be copied to web/bundles/mydirectory/css. So you have to include it like: {{ asset('bundles/mydirectory/css/main.css') }}.
You should execute the command from the root of your project. As you're using php console, it seems like you're in the app/ directory when executing this command. In that case, app/web/ does not exists, so the error is completely valid.
As you're on Windows, there is a change that symlink is not allowed/available. I believe it's available for admins only since Windows vista.
As a side tip, if MyDirectoryBundle is your app bundle (a bundle tied to your app and not meant to be reused by other apps), I would recommend to put the CSS file in the web/ directory directly. There is no need to put it in the bundle in such a case (this is only related to bundles that are shared, so the CSS is shared as well).
use php app/console instead of php console
I have two CSS files in the same folder, with identical access rights. When testing in the same Twig file, one CSS file generates a URL to the file and loads perfectly and one gives an error.
Error
An exception has been thrown during the rendering of a template
("Unable to generate a URL for the named route "_assetic_a328b4c_0" as
such route does not exist.") in #GutensiteStream/Stream35163.html.twig
at line 19.
Files on Server
ls -al /var/www/core/cms/src/Templates/GutensiteAdminBundle/Resources/public/css
-rw-rw-r-- 1 chadwick developer 17K Feb 7 14:00 dashboard.css
-rw-rw-r-- 1 chadwick developer 49K Feb 6 16:00 site.css
Template with CSS that Loads
{% stylesheets '#TemplatesGutensiteAdminBundle/Resources/public/css/site.css' %}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
Template with CSS that does NOT Load
{% stylesheets '#TemplatesGutensiteAdminBundle/Resources/public/css/dashboard.css' %}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
Linking to the File Directly Works
<link rel="stylesheet" href="/gutensite/v/2/0/bundles/templatesgutensiteadmin/css/dashboard.css">
Steps Taken
I have already cleared cache multiple times, via app/console cache:clear and via rm -rf app/cache/*. I use php app/console assets:install --symlink /var/www/core/web/gutensite/v/2/0/ to symlink the public files to the bundles, and of course they are accessible (as demonstrated via the direct link).
My Config.yml
assetic:
#don't use dynamic links to assets, use full production paths
use_controller: false
When I ran into this error, the solution was quite simple:
When in doubt:
bin/console cache:clear
Assetic is looked for a cached version which doesn't exist. This could be for any number of reasons, but cache:clear seems like it should be the first stop.
It is not recommended to use the # helper and load css directly from your bundle in production.
The best practice approach is to store the css files in the app/Resources directory and using assets:install requesting them from the web root, but seing as you don't have an AppBundle, the second best thing would be to request them from the web/bundles directory:
{% stylesheets
'bundles/templategutenstideadmin/css/site.css'
'bundles/templategutenstideadmin/css/dashboard.css'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
Make sure you run assets:install beforehand.
This way, your css files will be compressed to one file and they will be loaded with the latest changes from the assets:install command.
Loading css files directly from your bundle using # is not recommended outside of local testing. I suspect your first issue is the usage of muliple stylesheets tags in assetic (stylesheets tag is not a part of Twig), but generally using # for file linking is not a good idea for assets. Use it for things like routing and config in .yml files, but not for assets! :)
One instance where this error will occur is when you try to load such an asset in a child template, that is already being loaded in one of the parent templates.
To fix it, load the asset only once in a template chain.
(Have to post this as answer, as I can't comment, yet.)
config.yml
assetic:
bundles: [you bundle name , otherbundlename] #add this
I would like to know if it is possible with symfony 2 and Assetics to say that I want to load all of the css files in a specific folder even though this one has some other folders inside.
For example I have :
css/aaa.css
css/bbb.css
css/jquery/ccc.css
css/jquery/ddd.css
in assetics I would do that to load :
{% stylesheets 'bundles/my-bundle/css/*' %}
<link rel="stylesheet" href="{{ asset_url }}" media="screen" />
{% endstylesheets %}
this will only load aaa.css and bbb.css
Is there a way to say : 'take everything' in one single line (sure i could add each folder in the stylesheets tag but I want to know if I can avoid doing that)
Thank you
You can't do this thing directly with assetic as is yet but it's possible thanks to everzet and his AsseticPipeline class suite and will probably be brought in next Assetic major version.
So what to do now ?
test previous KnpRadBundle version by cloning it here
get more information about how to implement it in your project : read this discussion
Good luck.
In the app_dev environment, the files are processed for each request, and run through all the filters before they are provided by the Assetic controller. This is useful, because we will see every change directly:
In a production environment, this process is just too slow. In this case, Assetic is able to generate real files, which are static and can be delivered statically:
To generate the final assets, invoke the following script in your console:
$ php app/console assetic:dump --env=prod --no-debug
All the css will combine in the production environment.The above command will generate a css folder and a combined file into that folder.