Yeoman with Bootstrap 3

Question

I am new to Yeoman. I would like to use Bootstrap3 which i want to customize using the online generator to change the default styles to that of my apps styles.

Since Yeoman handles all the dependencies how can i make these changes and add it to the webapp?

Answer 1

If you are using the generator you got compiled css files. These files can only be integrated by hardcoding them in your project (in most cases your index.html). I would not recommend going this way. All css config parameter that are provided by the generator are also sass variables that can be changed. You may use these variables in your own project as follows:

Install sass-bootstrap by bower

bower install sass-bootstrap 

in your main.css you have to include the bootstrap.scss file:

@import 'sass-bootstrap/lib/bootstrap';

before this include statement you may change all variables that are provided by the bootstrap generator - for example to change the background color you have to write

$body-bg: eee;

You can do this with all variables that are provided by the generator. Just replace the @ with the $ sign.

For sure you need a compass target in your Gruntfiles.js. If you have problems configure your gruntfile, please have a look at https://npmjs.org/package/generator-bootstrap. With this generator you can create a sample project to get the required configuration.