In this post, I’m going to show you how to use Sass and its import feature in an Elixir Phoenix application with Brunch without breaking its CSS hot reload feature.

Install sass-brunch

First, we need to install sass-brunch as a dependency.

npm install sass-brunch --save

This is going to install sass-brunch and save it to our package.json file.

Update app.css

Second, we need to update our app.css file extension to app.scss to make it a Sass file.

The Sass Files

We need a directory to put our Sass files and we need to omit them from the compilation process of Brunch.

mkdir web/static/_scss

By putting an _ in front of its name, this folder is going to be ignored by the Brunch compilation process but still watched.

We can now put all our Sass files inside that folder and import then from web/static/css/app.scss.

Using import from app.scss

Import your Sass files from web/static/css/app.scss like this:

@import '../_scss/base';
@import '../_scss/buttons';
@import '../_scss/forms';

That’s it! The CSS hot reload feature is still working and we can import all our Sass files in any order we want!

Remember, the only way to include any Sass files from your _scss folder now is by importing them with @import in web/static/css/app.scss.

Have fun & Happy Coding! :)