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.
First, we need to install sass-brunch as a dependency.
This is going to install sass-brunch and save it to our
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.
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
Using import from app.scss
Import your Sass files from
web/static/css/app.scss like this:
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
Have fun & Happy Coding! :)