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
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?
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
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
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.
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.