Add Bootstrap 4 with SASS to Phoenix using NPM and Brunch
by: Peter Shoukry

Phoenix comes with Bootstrap included, but it’s ver 3.x and only CSS no SASS. I wanted to try Bootstrap 4 in one of my recent Phoenix projects, So if you want to do the same you should: 1- Remove the old Bootstrap CSS from web/static/css/phoenix.css 2- Install Bootstrap 4 and add it to package.json ```bash npm install --save bootstrap@4.0.0-alpha.6 ``` 3- Install sass-brunch and add it to package.json ```bash npm install --save-dev sass-brunch ``` 4- Add SASS plugin in brunch-config.js and configure it to include the Bootstrap 4 SASS files ```javascript plugins: { sass: { options: { includePaths: ['node_modules/bootstrap/scss'] } } ``` 5- Rename web/static/css/app.css to web/static/css/app.scss 6- Import Bootstrap in web/static/css/app.scss ```elixir @import "bootstrap" ```