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'; ```