-
-
Notifications
You must be signed in to change notification settings - Fork 255
check bootstrap installs css dependency #181
Comments
Yep, I was wondering if it's best to add dependency to CSS loader and shim CSS file into page when someone imports bootstrap. May be good for quick hacking, but often developers chain CSS/LESS/SASS files from libraries into their own build process and then include only one file. |
It's supposed to be, but the override seems to be out of date. Contributions welcome. |
So to be clear, when some JS library requires CSS file(s) to look/work properly, I must shim it in the override? It is not optional or dependent on the developer but it is mandatory? So what should I do, when I don't want to load multiple CSS files, but control it on my own? I guess forking (and modded package.json in the fork) is again my only option until persistent local overrides work. :) |
@smajl if you want to do your own control, you can do something like: import 'some-package'; // import js
import 'some-package/style.css!'; // import css separately We're going to be adding support to Bootstrap for importing just the JS eventually, but for now that is not possible to provide both options through config. Local overrides are really not a solution - I know it seems easier, but it breaks shared dependencies. |
@guybedford To be more specific, I just wanted to make a PR for one angular module which needs CSS to work properly. So I am probably supposed to shim that CSS in the override for others. But I don't want to be forced to load that CSS, I want to merge it with my other styles into one file. It's like biting your own tail here... :D |
@smajl what do you mean you want to merge it with your other styles into one file? How is creating an override shim stopping you from doing that? |
@guybedford It's not stopping me, I can do that, but I would then load the package's CSS twice. Once shimmed and once in my CSS build. |
Can you clarify why you would be loading the CSS twice? |
Me or someone else adds angular-loading-bar to registry: {
"directories": {
"lib": "build"
},
"main": "loading-bar",
"registry": "jspm",
"dependencies": {
"angular": "^1.2.0",
"css": "*"
},
"shim": {
"loading-bar": {
"deps": ["angular", "./loading-bar.css!"]
}
}
} This means, when I do I have my LESS file, which builds automatically and imports other CSS/LESS files, e.g.: @import (inline) '../../jspm_packages/github/chieffancypants/angular-loading-bar@0.6.0/loading-bar.css';
@import 'other-library';
// my own less
.body {} And then I have one That is why I am againt shimming of CSS files. Interestingly, e.g. |
Right, thanks. CSS builds are now supported by default inlining into bundles as of yesterday. Update jspm and the CSS plugin to see this working, it's documented at https://github.com/systemjs/plugin-css. |
Well, seems like I will have to change my workflow then:
import 'dep1'; // loads dep1.css in the process
import 'dep2; // loads dep2.css in the process
import 'my.css!';
// my JS code
Just one last thing, I would have to ensure, that |
I'd suggest that yes. You can also use the In terms of order, it's advisable to rely on specificity over order if using this CSS approach. I've updated the docs at https://github.com/jspm/jspm-cli/wiki/Plugins#css-builds about this stuff. Apologies if it's messing with your workflow, feedback would be great to hear. |
Well, I really love the idea of almost zero config install-and-forget packages including everything you need, but it takes time to do that mind shift from current habits. :) I haven't realized that we should omit 'link' tags at first. :) And relying on specificity is OK with me. Thanks for updating the docs and your time, you've been a great help. |
Thanks, glad to know it's not too much of a pain! |
Hi guys, I know this is a old thread... but I was using jspm lastly and it is really nice... and a question came to my mind, since everthing is installed using packages how to load the styles related to them... lol, yes I know the css-loader... I was using requirejs for some years. But still as smajl said, when you need to override... and reuse style, as in the case of less, sass,... you need to be able to set the configuration of a "global" style, at least for now ( itcss explains this well) Here the "import" problem is solved in js... that could be a tricky option sometimes for styling... so I was guessing if there are some other options... so I have found also plugins related with less like: https://github.com/sebasrodriguez/jspm-less also this plugin to load sass resolves paths to jspm packages: I wanted to write them here for others like me :D. |
No description provided.
The text was updated successfully, but these errors were encountered: