36

I'm working in a project with yeoman which includes grunt for automation and bower for client-side package management. One of the dependencies of my project is SASS twitter-bootstrap.

In other projects, in which I manually managed the updates of dependencies, I changed Bootstrap values directly in the Bootstrap variables.less (_variables.scss) file and extend it in main.less files under the project own css folder. I did the same here, but when I installed other packages with Bower it overrode everything (I "un-.gitignored" my components' folder, thanks God)

What's the best way to customize Bootstrap outside the components' folder so it won't happen again?

Community
  • 1
  • 1
marcoslhc
  • 1,194
  • 1
  • 17
  • 29

1 Answers1

45

You should never modify the contents of the bower_components folder. We'll make sure to make that clearer.

As for your question. Copy the _variables.scss file from the bower_components folder to eg. app/styles, then import it into your main.scss, or whatever it's named, above the import statement for bootstrap. This will result in your custom file overriding the default variables.

joshperry
  • 41,167
  • 16
  • 88
  • 103
Sindre Sorhus
  • 62,972
  • 39
  • 168
  • 232
  • 1
    Now that you mention the @import-overrides trick it seems pretty obvious XD – marcoslhc Mar 27 '13 at 15:42
  • 2
    I don't know if something has changed but I found that placing the import statement for the overriding _variables file **above** the Bootstrap import worked whilst placing it below didn't. – Terry Morgan Jun 23 '13 at 18:11
  • does that mean that when using bootstrap as a bower component _variables.scss is the only file I should overwrite? What if I need to change something else than what is in that file? Or maybe if I need to change something else I might not even need bootstrap at all? – Markus Oct 24 '14 at 13:09
  • 2
    @sindre-sorhus - what to do if I don't want to include all bootstrap components in final css output https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/_bootstrap.scss – Jitendra Vyas Jul 06 '15 at 16:38
  • I understand now that why we must use `!default` statement if needed. Thanks. – hayatbiralem Jun 07 '16 at 02:39