Using Symfony2 assetic results in 404 - php

I can't seem to get assetic to work with me.
Here is my assetic config in my config.yml file
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: [ FOSUserBundle, MyUserBundle ]
filters:
cssrewrite: ~
I have created a bundle that extends the FOSUserBundle. I've overridden the registration template and am trying to include my own css.
// MyUserBundle/Resources/views/Registration/register_content.html.twig
{% block stylesheets %}
{% stylesheets 'bundles/myuser/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
My bundle has the following structure:
/MyUserBundle
...
/Resources
...
/public
/css
signup.css
I always get a 404 though.
http://myproject.dev/css/494d9ed_part_1_signin_1.css 404 Not Found.
I get the following exception thrown:
No route found for "GET /css/494d9ed_part_1_signin_1.css"
I've published the assets so it also lives in
/MyProject
/web
/bundles
/myuser
/css
signin.css
What am I doing wrong?

Try with this syntax:
{% stylesheets filter='cssrewrite' '#MyUserBundle/Resources/public/css/*' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
and then on the command line:
php app/console cache:clear
php app/console assets:install --symlink
php app/console assetic:dump
In the DEV environment it should work without the assetic:dump command.

Related

Symfony2 Assetic dump when using multiple kernels

Using Symfony 2.7. I made my application in multiple kernels. My folder structure is like this:
Project
|
+-- app/
| |
| +-- candy/ // all config, parameters, kernel for candy application
| +-- vegetable/ // all config, parameters, kernel for vegetable application
|
+-- src/
+-- bin/
+-- vendor/
|
+-- web/
|
+-- candy/ // all assets, images, js etc. for candy application
+-- vegetable/ // all assets, images, js etc. for vegetable application
Now when I want to install assets i simply do:
php app/candy/console assets:install web/candy/
this works, however when I do:
php app/candy/console assetic:dump web/candy/
it searches for files in web/ directory, not in web/candy/bundles/../.
Why is that and what can be the solutions?
My base.html.twig:
{% block stylesheets %}
{% stylesheets
'bundles/mpshop/css/jquery-ui.css'
'bundles/mpshop/css/bootstrap.min.css'
'bundles/mpshop/css/style.css'
'bundles/mpshop/css/docs.css'
'bundles/mpshop/css/lightbox.css'
'bundles/mpshop/css/bootstrap-select.css'
'bundles/mpshop/css/style_custom.css'
'bundles/mpshop/css/responsive.css'
'bundles/mpshop/slick/slick.css'
'bundles/mpshop/slick/slick-theme.css'
'bundles/mpshop/css/fonts_googleapis.css'
filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{% endblock %}
{% block javascripts %}
{% javascripts
'bundles/mpshop/js/jquery-1.11.3.min.js'
'bundles/mpshop/js/jquery-ui.js'
'bundles/mpshop/js/migrate.js'
'bundles/mpshop/js/bootstrap.min.js'
'bundles/mpshop/js/bootstrap-select.js'
'bundles/mpshop/js/search.js'
'bundles/mpshop/js/ckeditor.js'
'bundles/mpshop/js/jquery.lightbox-0.5.js'
'bundles/mpshop/js/lightbox.js'
'bundles/mpshop/slick/slick.js'
'bundles/mpshop/js/custom.js'
'bundles/mpshop/js/scroll-to-top.js'
'bundles/mpshop/js/jquery.smooth_scroll.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
config.yml:
assetic:
debug: "%kernel.debug%"
use_controller: "%kernel.debug%"
bundles: [ EDBlogBundle, ApplicationEDBlogBundle ]
#java: /usr/bin/java
filters:
cssrewrite: ~
You should set the "write_to" directory in the config for each kernel.
app/candy/config/config.yml
assetic:
//...
write_to: '%kernel.root_dir%/../../web/candy'
app/vegetable/config/config.yml
assetic:
//...
write_to: '%kernel.root_dir%/../../web/vegetable'
Just as a side note, why is it that you are using multiple kernels?
I've heard the possibility of it but never seen the benefits so am interested in the thinking.

Assetic file does not exist error, even though no reference to file anymore?

I have a file called main.less that I created in the past. I deleted it because I no longer needed it, but now I get the following error when I try to run bin/console assetic:watch
[error] The source file "/home/distribution/public_html/distribution.tech/app/../web/bundles/app/less/main.less" does not exist.
or bin/console assetic:dump regardless of environment used.
[RuntimeException]
The source file "/home/distribution/public_html/distribution.tech/app/../web/bundles/app/less/main.less" does not exist.
My current routine which has been working until I did this was to create a shell script file that runs the following commands:
chown -R distribution:distribution .
rm -rf var/cache/dev/*
rm -rf var/cache/prod/*
rm -rf web/css/*
rm -rf web/js/*
bin/console cache:clear --env=dev
bin/console cache:clear --env=prod --no-debug
bin/console assets:install web --symlink --relative
bin/console assetic:dump --env=dev --verbose
bin/console assetic:dump --env=prod --no-debug
bin/console assetic:watch
bin/console doctrine:schema:update --force --dump-sql
bin/console doctrine:schema:update --force --dump-sql --env=prod
chown -R distribution:distribution .
bin/console server:run
I always run it as root to ensure everything will work, files are owned by user distribution though.
The only file that references the less and javascript files is...
base.html.twig
{% spaceless %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}
{% stylesheets 'bundles/skeleton/less/main.less' filter='less' filter='uglifycss' filter='cssrewrite' output='css/compiled-main.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}
{% javascripts
'#SkeletonBundle/Resources/public/js/*'
'#AppBundle/Resources/public/js/*'
filter='uglifyjs2'
output='js/js-compiled.js'
%}
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="{{ asset_url }}"</script>
{% endjavascripts %}
{% endblock %}
</body>
</html>
{% endspaceless %}
My Directory structure looks like below straight from my FTP
You will notice main.less is now in skeleton bundle instead of the app bundle. I moved it here, but for some reason it thinks its still in app bundle instead of skeleton bundle??
How do I fix this error?
Extra Info:
When I ran a verbose trace of the error I got this with asset:dump
Dumping all dev assets.
Debug mode is on.
03:37:43 [file+] /home/distribution/public_html/distribution.tech/app/../web/css/compiled-main.css
/home/distribution/public_html/distribution.tech/app/../web/bundles/skeleton/less/main.less
03:37:43 [file+] /home/distribution/public_html/distribution.tech/app/../web/css/compiled-main_main_1.css
/home/distribution/public_html/distribution.tech/app/../web/bundles/skeleton/less/main.less
03:37:44 [file+] /home/distribution/public_html/distribution.tech/app/../web/js/js-compiled.js
/home/distribution/public_html/distribution.tech/src/SkeletonBundle/Resources/public/js/shared.js
/home/distribution/public_html/distribution.tech/src/AppBundle/Resources/public/js/app.js
03:37:44 [file+] /home/distribution/public_html/distribution.tech/app/../web/js/js-compiled_part_1_shared_1.js
/home/distribution/public_html/distribution.tech/src/SkeletonBundle/Resources/public/js/shared.js
03:37:45 [file+] /home/distribution/public_html/distribution.tech/app/../web/js/js-compiled_part_2_app_1.js
/home/distribution/public_html/distribution.tech/src/AppBundle/Resources/public/js/app.js
03:37:45 [file+] /home/distribution/public_html/distribution.tech/app/../web/css/compiled-main.css
/home/distribution/public_html/distribution.tech/app/../web/bundles/app/less/main.less
[RuntimeException]
The source file "/home/distribution/public_html/distribution.tech/app/../web/bundles/app/less/main.less" does not exist.
Exception trace:
() at /home/distribution/public_html/distribution.tech/vendor/kriswallsmith/assetic/src/Assetic/Asset/FileAsset.php:62
Assetic\Asset\FileAsset->load() at /home/distribution/public_html/distribution.tech/vendor/kriswallsmith/assetic/src/Assetic/Asset/BaseAsset.php:103
Assetic\Asset\BaseAsset->dump() at /home/distribution/public_html/distribution.tech/vendor/kriswallsmith/assetic/src/Assetic/Asset/AssetCollection.php:151
Assetic\Asset\AssetCollection->dump() at /home/distribution/public_html/distribution.tech/vendor/symfony/assetic-bundle/Command/AbstractCommand.php:119
Symfony\Bundle\AsseticBundle\Command\AbstractCommand->doDump() at /home/distribution/public_html/distribution.tech/vendor/symfony/assetic-bundle/Command/AbstractCommand.php:51
Symfony\Bundle\AsseticBundle\Command\AbstractCommand->dumpAsset() at /home/distribution/public_html/distribution.tech/vendor/symfony/assetic-bundle/Command/DumpCommand.php:118
Symfony\Bundle\AsseticBundle\Command\DumpCommand->execute() at /home/distribution/public_html/distribution.tech/vendor/symfony/symfony/src/Symfony/Component/Console/Command/Command.php:256
Symfony\Component\Console\Command\Command->run() at /home/distribution/public_html/distribution.tech/vendor/symfony/symfony/src/Symfony/Component/Console/Application.php:803
Symfony\Component\Console\Application->doRunCommand() at /home/distribution/public_html/distribution.tech/vendor/symfony/symfony/src/Symfony/Component/Console/Application.php:186
Symfony\Component\Console\Application->doRun() at /home/distribution/public_html/distribution.tech/vendor/symfony/symfony/src/Symfony/Bundle/FrameworkBundle/Console/Application.php:86
Symfony\Bundle\FrameworkBundle\Console\Application->doRun() at /home/distribution/public_html/distribution.tech/vendor/symfony/symfony/src/Symfony/Component/Console/Application.php:117
Symfony\Component\Console\Application->run() at /home/distribution/public_html/distribution.tech/bin/console:29
assetic:dump [--forks FORKS] [--watch] [--force] [--period PERIOD] [-h|--help] [-q|--quiet] [-v|vv|vvv|--verbose] [-V|--version] [--ansi] [--no-ansi] [-n|--no-interaction] [-e|--env ENV] [--no-debug] [--] <command> [<write_to>]
Config.yml assetic settings:
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
cssrewrite: ~
uglifyjs2:
# the path to the uglifyjs executable
bin: /usr/bin/uglifyjs
uglifycss:
bin: /usr/bin/uglifycss
less:
node_paths: [/usr/local/lib/node_modules/]
bin: /usr/bin/less
Main.less in skeleton bundle
/* Global Variables */
#logo: "../images/logo-hires-opt.png";
/* Fonts */
#font-face {
font-family: 'ProximaNova';
src: url('../fonts/proximanova-regular-webfont.ttf');
}
#font-face {
font-family: 'ProximaNovaAltBold';
src: url('../fonts/proxima_nova_alt_bold-webfont.ttf');
}
.withfont{font-family:ProximaNova;color:blue;background:url('../images/background.jpg');}
#import "shared.less";
#import "header.less";
#import "footer.less";
Admin.less file in appBundle
.test{color:red}
admin.html.twig
{% extends 'SkeletonBundle::base.html.twig' %}
{% block body %}
<div id="wrapper">
<div id="container">
<div class="withfont">admin page</div>
<div>admin page without <span class="test">fonts</span></div>
</div>
</div>
{% endblock %}
In my case was necessary clear cache...
php bin/console cache:clear --env=dev
i was search for this file name (as string) in whole project ctrl+shift+f in phpstorm and he found file somewhere in cache directory... Maybe if you delete line from cached file it will be enough... but clear all cache i my case 100% success
Okay, turns out that my editor had an old version open to base.html.twig that was referencing the older location, so when it went to render it could not find it... I'm not sure how I didn't notice this, but the error was indeed related to the file not actually being there.
The error was in this command
{% stylesheets 'bundles/skeleton/less/main.less' filter='less' filter='uglifycss' filter='cssrewrite' output='css/compiled-main.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
weird part is I would have sworn I deleted the old base.html.twig, but after doing some tweaks it magically re-appeared, and I think it has to do with my editor and how it saves since I moved files around and kept the editor open at the same time.

How to configure cssrewrite in symfony when using relative path in css in symfony 2?

I've tried all the ways to do this, but still unlucky, when I view the source of my css it generates something like this url('../../../bundles/images/bg.jpg')
in config.yml I changed use_controller -> true same as in config_dev.yml this is my code \Resources\views\layout.html.twig:
{% extends "::base.html.twig" %}
{% block stylesheets %}
{% stylesheets 'bundles/globeuser/css/bootstrap.min.css'
'bundles/globeuser/css/styles.css'
filter="cssrewrite" output="css/compiled/styles.css" %}
<link rel="stylesheet" src="{{ asset_url }}" media="screen" />
{% endstylesheets %}
{% endblock %}
and i used LESS to compile css
my code originally was:
body{
background: url('../../images/bg.jpg');
}
In Resources/public/css/styles.css
I tried commands like:
- php app/console assets:install web --symlink
- php app/console assets:install
- php app/console assetic:dump
- php app/console assetic:dump --watch
- php app/console cache:clear
- php app/console assetic:watch

Symfony2 - Assetic - css font icons

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'

Symfony/Less #icon-font-path is undefined in glyphicons.less

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 %}

Categories