Using SASS with Phoenix 1.4 and Webpack

I recently created a new Elixir 1.8/Phoenix 1.4 application. One of the first things I do when creating a new application is ensuring I have SASS set up and ready to use. I was surprised at how easy it was to set up SASS with Phoenix 1.4, which now uses Webpack instead of Brunch. Here’s a quick walkthrough that worked for me.

1. First, push node_modules a few steps closer to infinite:

yarn add sass-loader node-sass style-loader —-dev

2. Rename app.css to app.scss

‘Nuff said…

3. assets/webpack.config.js - append to modules => rules:

{
  test: /\.scss$/,
  use: [
    process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
    "css-loader",
    "sass-loader"
  ]
}

4. assets/js/app.js:

- import css from "../css/app.css"
+ import css from "../css/app.scss"

Bingo bango! You should be very sassy now.