Alright I can’t figure this out, seems like it should be easily searchable in the docs or forums but I’m coming up with nothing. Turned on CSS pipeline and minify for the first time, all my css images break, as in…
… no longer works.
The only way I can make this work is to specify the insanely long path relative to the assets directory as such:
I’ve tried this with CSS Rewrite on and off, made no difference (cleared cache in between just to make sure). If things like {{ theme_dir }} and theme:// are supposed to work in a CSS file, then I can’t figure out the syntax.
Did this work at one point and then stop working? There is logic to recalculate the paths with pipelining because the css is moved to /assets and the old relative paths will not work. However, i’m not sure if this is something that broke, or never worked.
Oh wow, I found something new? Well… like I said, first time I ever tried it, I didnt even know about it before I saw the option in the Admin panel. I’ll open the issue.
I had a similar issue. For me, Font Awesome would not be loaded once I’d turn on the css pipeline. It took me hours to find the cause of the problem: Google fonts. I had been using the asset manager for importing the fonts directly from the Google server, e.g.
{% do assets.addCss('https://fonts.googleapis.com/css?family=Roboto', 101) %}
While using this without the pipline there were no issues but somehow the relative links would not be rewritten when the pipeline was active.
What I ultimately did was removing css imports like the one above and instead use the font via @import in the css file:
That’s interesting, might be some misconfiguration on my end.
I’ve just tested this again with the default antimater theme.
Adding
{% do assets.addCss('https://fonts.googleapis.com/css?family=Roboto', 104) %}
to the base.twig.html partial, so that the whole css asset handling looks like
{% block stylesheets %}
{% do assets.addCss('https://fonts.googleapis.com/css?family=Roboto', 104) %}
{% do assets.addCss('theme://css/pure-0.5.0/grids-min.css', 103) %}
{% do assets.addCss('theme://css-compiled/nucleus.css',102) %}
{% do assets.addCss('theme://css-compiled/template.css',101) %}
{% do assets.addCss('theme://css/custom.css',100) %}
{% do assets.addCss('theme://css/font-awesome.min.css',100) %}
{% do assets.addCss('theme://css/slidebars.min.css') %}
{% if browser.getBrowser == 'msie' and browser.getVersion == 10 %}
{% do assets.addCss('theme://css/nucleus-ie10.css') %}
{% endif %}
{% if browser.getBrowser == 'msie' and browser.getVersion >= 8 and browser.getVersion <= 9 %}
{% do assets.addCss('theme://css/nucleus-ie9.css') %}
{ % do assets.addJs('theme://js/html5shiv-printshiv.min.js') %}
{% endif %}
{% endblock %}
{{ assets.css() }}
results in the Font Awesome icons to be broken. I get 404’s for the font because the path links to fonts/fontawesome-webfont.woff2?v=4.4.0 etc.
I’m not saying this is a bug. Might really be just a misconfiguration on my end.
Note: Grav is not running from the root dir of the server but from a subdir. Though I guess that should not make any difference.
Mmmm I misunderstood, I thought Roboto was not working.
You’re right, I recreated by having
assets
css_pipeline: true
css_rewrite: true
Loading
{% do assets.addCss('https://fonts.googleapis.com/css?family=Roboto', 101) %}
and loading fontawesome, the fontawesome CSS is not rewritten for some reason, so the relative URLs break.
If I remove the Google Font and clear the cache, CSS rewrite works fine.
Unbelievably, I’m still having issues with this… If someone could please please explain this pathing problem that I’m having when specifying something as simple as a background image with CSS pipeline/minify/rewrite enabled.
Problem: my development area is NOT at the root of the web server. It is in a sub folder. However the production site is in the web root on a different server. /tgg/ is the dev sub dir.
Therefore:
background-image: url("/tgg/user/themes/ghost-theme/images/bg-vertical-stripe.jpg");
or
background-image: url("../images/bg-vertical-stripe.jpg");
needs to become:
background-image: url("/user/themes/ghost-theme/images/bg-vertical-stripe.jpg");
or
background-image: url("../user/themes/ghost-theme/images/bg-vertical-stripe.jpg")
on the production server, at least as best as I can tell. What am I not understanding?
Regarding loading google fonts - I’ve always loaded mine like this, with fontawesome and anything else, and it’s always worked. It’s even working right now with my CSS pipleline issues.
{% do assets.addCss('//fonts.googleapis.com/css?family=Copse',240) %}