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"
```