Creating a local Sass structure
Before we can start compiling Bootstrap's Sass code into CSS code, we have to create some local Sass or SCSS files. First, create a new scss
subdirectory in your project directory. In the scss
directory, create your main project file called app.scss
.
Then create a new subdirectory in the new scss
directory called includes
. Now you will have to copy the bootstrap.scss
and _variables.scss
from the Bootstrap source code in the bower_components
directory to the new scss/includes
directory:
cp bower_components/bootstrap/scss/bootstrap.scss scss/includes/_bootstrap.scss cp bower_components/bootstrap/scss/_variables.scss scss/includes/
Notice that the bootstrap.scss
file has been renamed as _bootstrap.scss
, starting with an underscore, and has become a partial file now.
Import the files you have copied in the previous step into the app.scss
file as follows:
@import "includes/variables";
@import "includes/bootstrap";
Then open the scss/includes/_bootstrap.scss
file...