cant import compass to symfony2 project - php

I'm trying to implement some small project into symfony2.5,
when I have added the the configurations of the compass to my config file and installed all the needed packages (ruby,sass,compass) though when I'm trying to assetic:dump the css I get the following
Error Output:
Error: File to import not found or unreadable: compass.
Load path: /path/to/project/CoreBundle/Resources/public/css
on line 6 of /tmp/assetic_sassE4kCr8
if I remove the #import "compass"; I still get the same problem with the #import "compass/css3"; AND the #import "compass/utilities/sprites";
in my config.yml I get the assetic set like the following:
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: [ FundCoreBundle ]
filters:
scss:
bin: "/usr/local/bin/sass"
compass:
bin: "/usr/local/bin/compass"
my css creation is as the following:
{% stylesheets
'#FundCoreBundle/Resources/public/css/style.scss'
filter='compass'
output='css/*.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
and my scss file is as the following
/* Compass utilities*/
// Use one CSS3 mixin instead of multiple vendor prefixes.
// #import "compass/support";
// #import "compass/reset";
#import "compass/css3";
#import "compass";
// See http://compass-style.org/help/tutorials/spriting/
#import "compass/utilities/sprites";
// Helps set up a vertical rhythm.
// #import "compass/typography/vertical_rhythm";
// Sass utilities
#import "helpers/variables";
#import "helpers/mixins";
// Vendors and external stylesheets
// #import "vendors/mmenu/jquery.mmenu";
#import "vendors/bootstrap/bootstrap";
// Base stuff
#import "base/typography";
#import "base/normalize";
#import "base/main";
what is the right way to import compass +ccs3 + sprites to the symfony project?

Related

Wrong directory location in css using npm

I added fontawesome to my site by doing these steps:
webpack.mix.js configuration.
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
npm install #fortawesome/fontawesome-free
In my package.json.
// Font Awesome
"dependencies": {
"#fortawesome/fontawesome-free": "^5.13.0",
In my app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&display=swap');
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
//Fontawesome
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/brands';
When I run npm run dev the fontawesome css directory location in my app.css is
url(/fonts/vendor/#fortawesome/fontawesome-free/webfa-regular-400.eot?6b20949b3a679c30d09f64acd5d3317d);
instead of
url(../fonts/vendor/#fortawesome/fontawesome-free/webfa-regular-400.eot?6b20949b3a679c30d09f64acd5d3317d);
Any idea how to fix this? New to Laravel, migrating from Yii 1. Thank you.
*try to use a relative path example:
#import '../fonts/vendor/#fortawesome/fontawesome-free';

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

Using Symfony2 assetic results in 404

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.

Compass spriting with Assetic on Symfony 2

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

Categories