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.