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 %}
Related
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.
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
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'
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.
It's my first time using Symfony so I don't know if I'm messing everything up or what but I can't seem to get compass spriting working on my project apparently.
This is what I have on my scss files:
#import "compass";
#import "compass/css3";
#import "compass/utilities/sprites";
#import "icons/*.png";
#include all-icons-sprites;
And I don't see any errors when compiling de sass but the icons are nowhere to be found and the css generated is something like:
.icons-sprite, .icons-icon01, .icons-icon02 {
background: url("/images/icons-sf92f9256db.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
On my config.yml file I have this:
assetic:
debug: "%kernel.debug%"
use_controller: false
filters:
cssrewrite: ~
sass: ~
compass:
bin: '/usr/bin/compass'
apply_to: "\.scss$"
http_path: /
images_dir: %kernel.root_dir%/../src/Es/DolceVitaBundle/Resources/assets/images
generated_images_path: %kernel.root_dir%/../web/images
http_generated_images_path: /images
parameters:
assetic.filter.compass.images_dir: %kernel.root_dir%/../src/Es/DolceVitaBundle/Resources/assets/images
assetic.filter.compass.http_path: /images
And my icons folder (with the original png files that I want to use for the sprite) is in /Myprojectfolder/src/src/Es/DolceVitaBundle/Resources/assets/images
The folder in /Myprojectfolder/src/web/images is empty
EDIT:
More info: I did app/console assetic:dump --watch and the css files were generated fine
And my styleshhets are added like this:
{% stylesheets output='css/*.css' filter="compass"
"#EsDolceVitaBundle/Resources/assets/scss/style.scss"
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Well, apparently something was off, maybe the cache, but the rest of my config was ok. I did the rest of my css and commented the icons part and after working for a day I uncommented to look at the issue again and the sprite showed up perfectly.
Don't forget to add to your parameters.yml:
assetic.filter.compass.generated_images_path: %kernel.root_dir%/../web/images