This repository was archived by the owner on Oct 9, 2020. It is now read-only.
Repository navigation
This repository was archived by the owner on Oct 9, 2020. It is now read-only.
Control imports and url() rewriting in CSS #11
Description
When I make sfx bundle (with separate CSS) I get from this in source files:
url('../fonts/fontawesome-webfont.eot?v=4.3.0')
to this in bundled CSS:
url(jspm_packages/npm/font-awesome@4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0)
This obviously doesn't work in production. Can please someone give me an advice, how to change my bundle task, so it keeps the urls intact or at least I can override the root path?
gulp.task('bundle', function (cb) {
var Builder = require('systemjs-builder');
var builder = new Builder();
builder.loadConfig('./jspm.conf.js').then(function() {
builder.buildSFX('src/bootstrap', PATHS.tmp.scripts + 'build.js', { sourceMaps: false, config: {sourceRoot: PATHS.tmp.scripts} })
.then(function() {
return cb();
})
.catch(function(ex) {
cb(new Error(ex));
});
});
});jspm.config.js:
System.config({
"baseUrl": "./",
"paths": {
"*": "*.js",
"travelis": "src/*.js",
"github:*": "jspm_packages/github/*.js",
"npm:*": "jspm_packages/npm/*.js"
},
"buildCSS": true,
"separateCSS": true
});
...
Activity
smajl commentedon Feb 21, 2015
Perhaps @guybedford could help? Or @Alxandr who introduced #9? Thanks guys. This is the last thing separating me from successful production build here. :D
Alxandr commentedon Feb 21, 2015
You would have to modify the css plugin to allow for more settings I think.
Or rather, use settings you pass in.
guybedford commentedon Feb 22, 2015
@smajl can you not make the font URL an absolute URL instead of a relative URL? Then it shouldn't be changed I don't think?
Alxandr commentedon Feb 22, 2015
@guybedford absolute uri's can't really be used. Just imagin installing bootstrap for instance. How should it know where it was installed to? Even your own local css can't nesesarily use absolute paths in the css if you have different hosting (locally when I develop I use
localhost:3000/, whereas on github pages it'syolodev.github.io/<repo-name>, so the absolute path is different.guybedford commentedon Feb 22, 2015
@Alxandr right. Note that for dynamic imports, assets and source maps, it can actually advisable to still serve jspm_packages in production.
Alxandr commentedon Feb 22, 2015
Yeah, but if I do
jspm bundleit just globs them all up into one blob for me nicely :)My application went from ~150 requests to ~7, and from 10 seconds to bot down to 1.
Not really important to get the css in, but it's fun when this stuff Just Works (TM) ^^
smajl commentedon Feb 22, 2015
I have (temporarily) solved this with help of
gulp-injectandgulp-usemin. I am basically including manually all the CSS libs with relative urls that I don't want to clobber. Then injecting the bundled CSS, then my own CSS. Then it is all "bundled" again with usemin. Inspired by @martinmicunda workflow. It looks like this:Problems will arise, when I would need to import some JS lib which has dependency on CSS with urls - the CSS would get processed by plugin and urls cloberred and bundled. I obviously don't want to include the whole file again (duplicating it just to override paths back to original) so I would need to e.g. utilize CSS specificity to override those urls.
Alxandr commentedon Feb 22, 2015
@smajl btw, what is wrong with the path that's generated?
jspm_packages/npm/font-awesome@4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0seems like a valid path to me. But the path you get depends on where you place the bundle file. For instance, in my setup I get paths like../jspm_packages/.....instead, because I build the bundle tolib/app.js.smajl commentedon Feb 22, 2015
@Alxandr Well.. you are right, there is no problem with url like that. In practice, I will need to change the build workflow slightly. Copy all the fonts and images to dist directory while keeping the jspm folder structure, that will work.
Unfortunately, no matter where I generate the bundle file, the urls are always the same absolute path as mentioned at the top. Would really like to have that same
../jspm_...as you have, so I can have structure like this. :)Alxandr commentedon Feb 23, 2015
You're using the
separateCSSoption, right?It's supposed to be handled by this line: https://github.com/systemjs/plugin-css/blob/master/css-builder.js#L26
smajl commentedon Feb 23, 2015
@Alxandr See my first comment, bottom part, there is my jspm config. Yep, I am using
separateCSS. No matter what, I get the same paths in URLs..guybedford commentedon Feb 23, 2015
Right, I've created #13 - it's an important part of the normalization rules.