Configuring Brunch SASS to import node_module css in Phoenix Application
by: Peter Shoukry
[Phoenix](http://phoenixframework.org/) uses [Brunch.io](http://brunch.io/) for asset management by default. To import a css file from any node_module you have to configure brunch to see the folder containing the css files of that node_module. For example to use bootstrap:
1- Configure brunch to see the bootstrap CSS folder.
```yaml
// Configure your plugins
plugins: {
sass: {
options: {
includePaths: ['node_modules/bootstrap/scss'
}
}
}
```
and if you need bootstrap javascript:
```yaml
npm: {
enabled: true,
globals: { // Bootstrap's JavaScript requires both '$' and 'jQuery' in global scope
$: 'jquery',
jQuery: 'jquery',
Popper: 'popper.js',
bootstrap: 'bootstrap', // Require Bootstrap's JavaScript globally
}
}
```
2- In your `app.scss` import bootstrap stylesheet file:
```yaml
@import 'bootstrap';
```