Adding css overrides.

[pbeets]

This package is fantastic. However, with the current setup, you cannot add styles post-bootstrap. For instance overrides and additional styles cannot be included because bootstrap is included at the end and takes precedence. I'm using some themes from bootswatch.com and this can only be used by overriding the default bootstrap styles.

[Nemo64]

well you can add styles post bootstrap like you normally would. Just beware the load order of meteor. I recommended putting bootstrap into the lib folder which means it has a higher priority. However putting a folder into that lib folder will have an even higher priority. Have you tried a setup like this?:

client/lib/custom.bootstrap.json
client/lib/themes/yeti.min.css

Now that I think about it, It might not be as smart to put bootstrap into the lib folder. I may change the readme to something like bootstrap/custom.bootstrap.json. It actually doesn't matter where you put the json as long as it isn't a server folder. You could try something like this if you want:

bootstrap/custom.bootstrap.json
bootstrap/themes/yeti.min.css

[pbeets]

I have other less files that I need to append after the bootstrap file. How about just making an option to make the generated custom.bootstrap.less into an importable file, so I can say do:

// client/styles.less
@import "lib/custom.bootstrap.generated.import.less";
@import "components/header.import.less";

Right now I have my styles.less outside of the lib folder, however I get errors because I need some of the bootstrap mixins which are not available. Previously I was including the bootstrap less file first (like in my example), and then my own component files and that worked perfectly.

[Nemo64]

the bootstrap mixins and variables are available though custom.bootstrap.import.less which only contains mixins and variables so you can import it as often as you like.

[pbeets]

I have done that, however the generated bootstrap css file overwrites my custom one. I think the issue is that the generated bootstrap css file overwrites everything, so I lose the colors and all overriding bootstrap styles. I've tried all the permutations. I can fork your repo and apply fix it myself if you don't feel like changing what you have.

[Nemo64]

then move bootstrap so that it loads before your styles or move your styles so that they load after bootstrap. Or am i missing something?

[pbeets]

I get what you are getting at, and I have tried them already. It always ends up the bootstrap generated css overriding mine.

[Nemo64]

what is your setup right now?

[pbeets]

My current setup:

client/lib/custom.bootstrap.less
client/stylesheets/components/components.import.less
client/overrides.import.less
client/styles.less

In my styles.less

@import "lib/custom.bootstrap.mixins.import.less";
@import "stylesheets/components/xxxxxxxx.import.less";
@import "stylesheets/overrides.import.less";

[Nemo64]

Seems about right. I'd recommend using @import "custom.bootstrap.import.less" instead, as it also includes variables but other than that there is nothing wrong with that setup.

Then try this: remove or rename the json file and rename custom.bootstrap.less into custom.bootstrap.import.less, then import it into your styles. If that works as you expect it there is a loading order issue. If not then your styles are faulty... Or you try to do something that I do not understand. ;)

[pbeets]

Works perfect if I try your second suggestion, which is what I was saying all along :) If this is the recommended solution then I can stick with it. But it seems less than ideal since I'm 'hacking' around your package. Thanks.

Edit: Bootstrap components no longer work, e.g. dropdowns.

[Nemo64]

it wasn't a solution, i try to understand what the problem is. I have a project where I overwrite styles too and it works.

I have a feeling that the lib folder doesn't work for less files, could you try that? If you styles.less file is deeper in the directory structure than bootstrap.less, does that work?

[pbeets]

client/lib/custom/astyle.less (see if alphabetical)
client/lib/custom.bootstrap.less

My styles are still being overwritten. May I ask how your styles are structured if it's working for you?

[Nemo64]

I use the file structure of meteor-em with bootstrap placed in client/lib. But to be honest, I have no idea how meteor builds the load order. It seems kind of random if I look closer.

The loading order seems to be this:

client/views/layouts/game_layout/game_layout.less
client/app.less
client/lib/custom.bootstrap.less
client/views/layouts/master_layout/master_layout.less
client/views/shared/not_found/not_found.less

So I have no idea how that is ordered. This may be a case for a meteor issue. I'll investigate that further when I have time again.

[pbeets]

From the meteor documentation, it is desired behavior for the bootstrap less file to be in the lib, as that should get loaded first.

From there, we would want to override the default bootstrap styles with our own modifications, and thus we should have the styles in a parent directory. However, it is not clear whether meteor treats less files as css files, it does say it gets generated into css first, but it is unclear if they are stored in the same directories as their less counterparts.

[tanis2000]

If that can be of any help, I was experiencing this same issue because I was importing custom.bootstrap.import.less instead of custom.bootstrap.less.

My folders layout is the following:

client/less/bootstrap-social.import.less
client/less/bootswatch.import.less
client/less/custom.bootstrap.import.less
client/less/custom.bootstrap.json
client/less/custom.bootstrap.less
client/less/custom.bootstrap.mixins.import.less
client/less/font-awesome.css
client/less/screen.less
client/less/variables.import.less

and my screen.less is like this:

@import "custom.bootstrap.less";
@import "variables.import.less";
@import "bootswatch.import.less";
@import "bootstrap-social.import.less";

I don't know if it's a random thing and Meteor got the loading order right just by chance. But this is working fine for me.

[Nemo64]

beware that if you import custom.bootstrap.less, that you may have included all the bootstrap css twice. I'm not sure if the css compressor of meteor is intelligent enough to fix that.

But it's a good hint that it may has to do with importing stuff, as I tried to recreate the problem but failed until now.

[bobmonsour]

I just started looking at this after having based my bootstrap with less usage on this post from Manuel Schoebel.

And then I came across this minimalist approach which I find very compelling. By simply putting the bootstrap 3 distribution into the public folder, renaming bootstrap.less to bootstrap.import.less and then creating your own styles.less file that starts with @import /bootstrap.import.less you get all the override capability.

The only downside is that it does not let you easily customize what is included/excluded from the bootstrap download. However, you could always simply remove files directly from the /public folder for items that you don't want to include.

Perhaps I'm missing something, but I find this approach to be very appealing and removes the reliance on any packages as you can do it all "by hand." The package landscape has been particularly challenging of late and I'm looking for ways to reduce reliance on packages when I can.

I'd welcome thoughts from others on this. Thanks for listening.

UPDATE: I failed to mention that all of the less files in the less dir would need to be renamed as .import.less and that all of the @import statements in the bootstrap.import.less would have be changed to reflect all of the .import.less filenames. I still find this rather straightforward.

UPDATE2: It also appears to work if you put the bootstrap files in the /private directory. If you are concerned about the bootstrap files being available via url. In either case, the files remain on the server and are used to compile the ultimate css that gets sent to the client.

[pbeets]

I have tried the many different directory schemes and was not able to successfully override the resulting generated file. I ended up just taking the outputted custom.bootstrap.less file and renaming it to custom.bootstrap.import.less and importing it in my styles.import.less and deleting the json file - though this is less than ideal.

[AGresvig]

Anyone figure out a more streamlined way to include LESS theme-files, without renaming autogenerated files etc? Or I guess the core question is, did anyone figure out how Meteor determines the load order of Less files?

[shilman80]

I have been hacking around on this as well in shilman80/meteor-bootstrap experimental fork

Patterned off @pbeets solution, this version generates {mixins,variables,bootstrap}.import.less

My main.less looks like:

@import 'boostrap/bootstrap.import.less';
//... other CSS here

[svub]

Hi, I'd recommend to include this option into this package. E.g. "generate-import-file": false (as default). I need the generated less file as import.less because I want to make use of the great macros Bootstrap provides - which I can not access from my less files unless I include the bootstrap files as less source. It's somehow a bit difficult to explain, @pbeets also tried, but it's really necessary to have the "import-only" switch.

[dealable]

Just in case this wasn't obvious to anyone else, after you rename the custom.bootstrap.json file, the JS files will no longer be available to the client. To add back the bootstrap.min.js via CDN, you can use viacdn:bootstrapjs. 35KB file, might as well take advantage of caching if available.

[Maxhodges]

I don't have any trouble overriding the bootstrap styles with my theme's css or with my custom less. my file order looks like this http://screencast.com/t/2jjY5122T5B

[igoodrich]

I'll add to this because it's still open, I found it via google (as will others), and I had some luck figuring it out and I think I understand the why of it.

I think it would help to review this load order documentation: http://docs.meteor.com/#/full/structuringyourapp (scroll down to 'File Load Order')

There are several load ordering rules. They are applied sequentially to all applicable files in the application, in the priority given below:

1. HTML template files are always loaded before everything else
2. Files beginning with main. are loaded last
3. Files inside any lib/ directory are loaded next
4. Files with deeper paths are loaded next
5. Files are then loaded in alphabetical order of the entire path

Meteor loads files in a fairly simple and predictable way. If you want the custom* files to load before your overrides, just follow the rules above. A subdirectory of the directory your overrides are in will work, as suggested above. Other things will work as well.

[jonathanpmartins]

how I make it, when I will use bootstrap via CDN? or font-awesomem or jquery or angular, or anything... animate.css... etc merged-stylesheets.css is injected and loaded before everithing, and javascript insertBefore() dont work...