search

scotch / angular-brunch-seed

AngularJS + Brunch
Other
228 stars 78 forks source link

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

Open tdumitrescu opened 10 years ago

tdumitrescu commented 10 years ago

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 https://github.com/tdumitrescu/angular-express-coffee-blog/commit/12bffdbf1f22a949ac86c86c708c16d55b328abb.

kylefinley commented 10 years ago

@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 commented 10 years ago

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.