CSS overrides don't work, because Bootstrap CSS is packaged twice into app.css

[tdumitrescu]

app.less contains imports for all the Bootstrap 2.3.2 stylesheets, but since Bootstrap is in bower_components, Brunch also compiles that version into app.css. So app.css is twice as large as it needs to be, but also the app-specific CSS in _overrides.less is unable to override Bootstrap styles, because Bootstrap ends up both before and after it in the compiled CSS.

I resolved this in my repos by removing all the Bootstrap imports from app.less (making it really just for app-specific CSS), and ensuring that Brunch adds app.less after the vendored CSS in config.coffee: see tdumitrescu/angular-express-coffee-blog@12bffdb.

[kylefinley]

@tdumitrescu,

Thank you for bringing this issue to my attention. Your work-around seems like a good one, but I would like users to have the ability to to change the theme by modifying the CSS via variables.less. I'll look into excluding the bower_components Bootstrap from the build. It might a while before I have time to get to this though.

Thanks for reporting this -- I'll keep this issue open until I have found a solution.

[tdumitrescu]

Yeah, that makes sense. Only downside I see is that the bootstrap imports in app.less have to be kept up to date whenever the bootstrap version changes (i.e., if a new version of bootstrap-less adds or removes a file). But I guess this is the easiest way to ensure that user-configured LESS can be added both before and after Bootstrap modules.