Closed canhamd closed 8 years ago
guybedford
commented
8 years ago Yes this is a catch of calling the installed loader css, while also wanting to load from a local css folder. To indicate the folder, you can try using an import like ./css/styles.css! instead.
canhamd
commented
8 years ago Thanks, I figured this out, I've only been working with systemjs for 2-3 days. I had the same problem with a folder called typescript and came up with the same solution you suggested, but in that case I also had to change the package path I used for the defaultExtension and loader (plugin-typescript) remappings, i.e.:
"packages": {
"../typescript": {
"defaultExtension": "ts",
"meta": {
"*.ts": {
"loader": "ts"
}
}
},
},If you can do anything about this it would be nice, would make for a cleaner syntax, if not well we have a workable solution, my initial thinking was that it wouldn't try and invoke the module unless you used the 'css/styles.css!' or 'css/styles.css!css' syntax.
On a side note, I've just had last week off work and decided to get up to speed on all the front-end ecosystem techs, started looking at npm, Bower, Grunt, Gulp, Browsify, etc. etc. Was very happy I decided to take a final look at your jspm/systemjs tech. I love it, this along with now having got VSCode configured correctly i'm good to go moving to ES6 and my fellow programmer will be good to go moving to Typescript.
We both come from a ASP.Net background (well for our web work), but have transitioned to Knockout over the last year or so, now with jspm/systemjs and Knockout components I can go fully SPA, my fellow programmer is still keen on trying Angular but it doesn't seem natural to me.
So thank you very much for all your work, very impressive.
canhamd
commented
8 years ago Update:
using the above mentioned package config allowed me import the typescript module using this syntax:
import { Startup } from '../typescript/hello-worldfor the file hello-world.ts, but only unbundled, bundling would still crash.
However renaming the folder to typescript-modules allowed me to revert to this package config:
"packages": {
"typescript-modules": {
"defaultExtension": "ts",
"meta": {
"*.ts": {
"loader": "ts"
}
}
},
},which then worked unbundled and allowed bundling, using this import of course:
import { Startup } from '../typescript-modules/hello-worldSo it seems best practice at the moment to avoid folder names matching module names altogether.
guybedford
commented
8 years ago Sure, and when they do match, using a relative require (./typescript) is the way to avoid it.
I initially had a folder called css containing my stylesheets but bundling was throwing an error when I had imports of css from this folder, changed the folder name to stylesheets and bundling succeeded.
i.e.:
import 'css/styles.css!'; // fail import 'stylesheets/styles.css!'; // succeed
Command screen dump:
E:\systemjs-and-knockout>jspm bundle "app/startup" --inject Building the bundle tree for app/startup...
err Error: CSS Plugin: Broken @import declaration of "jspm_packages\github\systemjs\plugin-css@0.1.20\styles.css" at file:///E:/systemjs-and-knockout/jspm_packages/github/systemjs/plugin-css@0.1.20/css-builder.js:76:13