Prevent assetic from sending css files to compass - symfony

I'm working on a symfony 2.8 project.
Assetic is used to combine CSS to one file. I have written my own CSS as SCSS an use compass to compile it.
I now added a 3. party lightbox plugin and can't get assetic to put my SCSS and the plain CSS of the lightbox together.
Assetic config:
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: [ ]
filters:
cssrewrite: ~
compass:
bin: /usr/local/bin/compass
apply_to: '\.scss$'
HTML-Head:
{% stylesheets
'css/screen.scss'
'assets/vendor/lightgallery/dist/css/lightgallery.css'
filter='cssrewrite,compass' output='css/compiled/app.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
With this I get an error like:
/*
[exception] 500 | Internal Server Error | Assetic\Exception\FilterException
[message] An error occurred while running:
'/usr/local/bin/ruby' '/usr/local/bin/compass' 'compile' '/Applications/XAMPP/xamppfiles/htdocs/XYZ/app/cache/dev' '--boring' '--images-dir' '/Applications/XAMPP/xamppfiles/htdocs/XYZ/app/../web/images' '--config' '/Applications/XAMPP/xamppfiles/htdocs/XYZ/app/cache/dev/assetic_compass05Ld1V' '--sass-dir' '' '--css-dir' '' '/Applications/XAMPP/xamppfiles/htdocs/XYZ/app/cache/dev/assetic_compassRm5H7y.css'
Error Output:
WARNING on line 2 of /Applications/XAMPP/xamppfiles/htdocs/XYZ/app/cache/dev/assetic_compassRm5H7y.css:
This selector doesn't have any properties and will not be rendered.
WARNING on line 3 of /Applications/XAMPP/xamppfiles/htdocs/XYZ/app/cache/dev/assetic_compassRm5H7y.css:
This selector doesn't have any properties and will not be rendered.
Output:
error /Applications/XAMPP/xamppfiles/htdocs/XYZ/app/cache/dev/assetic_compassRm5H7y.css (Line 5: Invalid CSS after "'lg'": expected expression (e.g. 1px, bold), was ";")
Compilation failed in 1 files.
Input:
/*! lightgallery - v1.2.21 - 2016-06-28
* http://sachinchoolur.github.io/lightGallery/
* Copyright (c) 2016 Sachin N; Licensed Apache 2.0 */
#font-face {
font-family: 'lg';
src: url("../fonts/lg.eot?n1z373");
src: url("../fonts/lg.eot?#iefixn1z373") format("embedded-opentype"), url("../fonts/lg.woff?n1z373") format("woff"), url("../fonts/lg.ttf?n1z373") format("truetype"), url("../fonts/lg.svg?n1z373#lg") format("svg");
font-weight: normal;
font-style: normal;
}
[...]
If I just rename the CSS file to SCSS it works. I don't know why compass has a problem processing the file when I send it as CSS to assetic.
Besindes this behaviour assetic shouldn't send the CSS file to compass anyway.
What did I do wrong?

Related

Linking to a font inside public directory in a css file

I have this css file called fonts.css that is inside public/assets/css with the following code
#font-face {
font-family: Lato-light;
src: url("{{asset('assets/fonts/Lato/Lato-Black.ttf')}}");
}
I ahve another file called custom.css with the following code
h1 {
font-family: Lato-light;
}
In my header.blade.php file the code is as follows
<link href="{{url('assets/css/fonts.css')}}" rel="stylesheet" rel="stylesheet" />
<link href="{{url('assets/css/custom.css')}}" rel="stylesheet" rel="stylesheet" />
This code src: url("{{asset('assets/fonts/Lato/Lato-Black.ttf')}}"); is not giving the laravel url its supposed to show but instead its outputting the code as it is.
Am i attaching the font correctly?

Symfony asset function prepends / to http url

I've tried to add webpack to a Symfony 3.1 app. The problem is, when I add HMR, the asset function doesn't resolve correctly
// base.html.twig
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
// app/config/config_dev.yml
framework:
assets:
base_path: "http://localhost:8080"
Result: <script src="/http://localhost:8080/bundles/fosjsrouting/js/router.js"></script>
How can I tell Symfony to not prepend the starting / if the base_path begins with http://?
You can use base_urls. Protocol/host/port should not be used in base_path for assets.
https://symfony.com/doc/current/reference/configuration/framework.html#assets

How to get Bower Install to copy files to another directory before linking them in html file?

In my gruntfile.js I am using bower install to create the necessary script tags in my index.html for all my js libraries. My grunt file entry looks like this:
bowerInstall: {
target: {
src: ['wwwroot/index.html'],
cwd: '',
dependencies: true,
devDependencies: true,
exclude: [],
fileTypes: {},
ignorePath: '',
overrides: {}
}
}
My index.html gets correctly updated from my index.html.tpl as seen here:
<head>
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/underscore/underscore.js"></script>
<!-- endbower -->
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<link rel="stylesheet" type="text/css" href="wwwroot/app/styles/style.css" />
What I want to happen is to copy all js library files to a specific lib directory, and then link them from there. Can this be accomplished with bower install or is there another grunt plug-in I should be using? The bower-install plugin seems popular but I can't find much documentation for it.
You should try to use grunt-bower along with grunt-bower-install. You can configure bower to install copy files to specific folders. It will look like this:
bower: {
dev: {
dest: 'lib/',
js_dest: 'lib/js',
css_dest: 'lib/styles'
}
}
Then if you run the task:
grunt bower
You will have something like this in your lib folder:
/js
/package1
package1_file1.js
package1_file2.js
/package2
package2.js
/styles
/package1
package1.css
/package2
package2.css
Add a .bowerrc file next to your bower.json. If the file is already in there change its content from:
{
"directory": "bower_components"
}
to
{
"directory": "you/new/lib/path"
}
Re-install your Bower components:
bower install
Then call the Grunt task:
grunt bowerInstall

assetic and filters

I try to use the cssembed filter loading my stylesheets (because of the images referenced in the css)
In config.yml
assetic:
debug: %kernel.debug%
use_controller: false
bundles: [ cramifviewkitBundle ]
#java: /usr/bin/java
filters:
cssrewrite: ~
cssembed:
jar: %kernel.root_dir%/Resources/java/cssembed-0.4.5.jar
yui_css:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
yui_js:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
I download cssembed-0.4.5.jar and located it in src/my_bundle/Resources/java
in the template I wrote :
{% stylesheets
'#myBundle/Resources/public/css/*'
'#myBundle/Resources/public/JQMenu/css/*'
filter='cssembed'
%}
Everything is fine for the first import, but for the second one, when I look with firebug, I have this :
<link type="text/css" href="/viewkit/web/app_dev.php/css/eb2d30c_part_1_jqueryMenus_1.css" rel="stylesheet">
and when I open it, it is not css but html because there is an error :
<h1>Exception thrown when handling an exception (Symfony\Component\HttpKernel\Exception\FlattenException: Warning: json_encode() [<a href='function.json-encode'>function.json-encode</a>]: Invalid UTF-8 sequence in argument in C:\wamp\www\viewkit\vendor\monolog\monolog\src\Monolog\Formatter\NormalizerFormatter.php line 99)</h1>
<div class="block_exception clear_fix">
<h2><span>1/1</span> <abbr title="ErrorException">ErrorException</abbr>: Warning: json_encode() [<a href='function.json-encode'>function.json-encode</a>]: Invalid UTF-8 sequence in argument in C:\wamp\www\viewkit\vendor\monolog\monolog\src\Monolog\Formatter\NormalizerFormatter.php line 99</h2>
</div>
<div class="block">
<ol class="traces list_exception">
<li> in C:\wamp\www\viewkit\vendor\monolog\monolog\src\Monolog\Formatter\NormalizerFormatter.php line 99</li>
any idea where it could come from ?
Put the cssembed-0.4.5.jar in app/Resources/java directory as you specified in the configuration.

How to combine these assetics in Symfony2?

I'm using ExposeTranslationBundle (expose translations to javascript) and JMSI18nRoutingBundle (expose routes to javascript). This is part of my <head> tag:
{% javascripts filter='?yui_js' output='js/app.js'
'../app/Resources/public/js/jquery-*.js'
'../app/Resources/public/js/jquery/*'
'../app/Resources/public/js/app.js'
'bundles/fosjsrouting/js/router.js'
'bundles/bazingaexposetranslation/js/translation.js' %}
<script src="{{ asset_url }}" ></script>
{% endjavascripts %}
<!-- ExposeTranslationBundle and JMSI18nRoutingBundle -->
<script src="{{ path('fos_js_routing_js',
{"callback": "fos.Router.setData"}) }}"></script>
<script src="{{ url('bazinga_exposetranslation_js') }}"></script>
Is possible to combine the last two <script> imports into first assetic and how?
I thing it is not possible because the FOSJSRouting javascript file is generated by a controller. Internaly the bundles caches the js but in app/cache, so it needs to go through the controller every request. I'm not familiar with the expose translation bundle but I guess it's the same problem here.
There has been an ongoing discussion in the issue tracke of FOSJsRouterBundle on github and there is also a sollution. See the full issue here: https://github.com/FriendsOfSymfony/FOSJsRoutingBundle/issues/22
The workaround is to have a script or command to dump the output to files in web/js directory:
<?php
require_once __DIR__.'/../app/bootstrap.php.cache';
require_once __DIR__.'/../app/AppKernel.php';
use Symfony\Component\HttpFoundation\Request;
$kernel = new AppKernel('stage', false);
$kernel->loadClassCache();
$response = $kernel->handle(Request::create('/js/routing?callback=fos.Router.setData'));
file_put_contents(__DIR__.'/../web/js/routes.js', $response->getContent());
This is somewhat of a workaround sollution. I've been thinking about implementing a generic bundle wich whome this task can be configured for several other bundles using controllers to output js. The controller actions would have to be configured in a yml file and then a command would have have to be executed at each deployment/modification of routes/strings. But I havn't had time for this... yet ;)
Instead of import, you could happily put it inline, ie:
<script type="text/javascript">
{# BazingaExposeTranslation #}
{% render 'bazinga.exposetranslation.controller:exposeTranslationAction'
with { domain_name: "messages", _locale:app.session.locale, _format: "js" } %}
{# JMSI18nRoutingBundle ... #}
</script>
You need to check the routing file for those bundles.

Resources