I’m updating an older app’s packages and I want to use bootstrap directly from npm. No matter where I try to import the bootstrap CSS, it’s always listed below the app’s bundled CSS. Even when using the <meteor-bundled-css/> pseudo tag at the bottom of client/header.html.
This is backwards to how the entire app’s styles have been developed to date. With the older Meteor package twbs:bootstrap, the CSS was ordered before the app’s bundle. The new ordering wrecks everything. Would prefer not to re-engineer a huge CSS file.
Is there any native way to manage this with load ordering or something? My app’s CSS lives at ui/stylesheets/app.css and is eagerly loaded. Is there a way to lazy load your own app’s CSS to make sure it comes after where you import npm package’s CSS? My new app structure doesn’t use the imports folder and instead uses the client and server entry points in package.json.
The only workaround I have now is to use <meteor-bundled-css/> and put a CDN <link/> element to the bootstrap CSS above it in client/header.html. I would prefer not to do this.
I’ve gotten around this by having a bootstrap.scss file in my project that imports the scss from bootstrap, so it gets bundled into my app css, but before my own css.
It is annoying to have to add an extra compiler plugin though
1 Like
Thanks.
What’s the scss compiler plugin? I assume it can just import bootstrap.min.css too - without it being scss file? As the npm bootstrap module only has css and less. It’s fine for me to just use the css file.
It sounds like another angle might be to “packagify” your own app’s styles and import them from a package? That would probably put a dent in development speed/refreshing.
Ah, I’m using bootstrap 4, which has css and scss, they dropped less support a couple of years ago when they released version 4
https://npmfs.com/package/bootstrap/4.4.1/
If you’re still on Bootstrap 2 or 3, you can do the same, but with the less compiler.
Nope, sass and less both treat @import for files ending in .css as literal css imports and won’t import the file.
After quickly checking the docs for less, it does look like you can over-write that behaviour by forcing less to import it as a less file with @import (less) "{}/node_modules/bootstrap/dist/bootstrap.css", which means it will get compiled.
1 Like
Been doing app updates and revisited this… I didn’t realize that I could have solved my issue by simply copying the npm package’s CSS file (bootstrap.min.css) into my own app in a folder deeper than my main app’s CSS. Then it gets added in the correct order.
I know it’s not best practice to brute-force copy (or symlink) a file like that, but it beats loading it from a CDN in the header, at least from a reliability point of view (and I had plenty of issues with CDN reliability).
Looking forward to moving on from Bootstrap into Tailwind.