Isnor Creative
Isnor Creative Blog
Ruby, Ruby on Rails, Ember, Elm, Phoenix, Elixir, React, Vue

Feb 14, 2019

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,

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.

Gordon B. Isnor

Gordon B. Isnor writes about Ruby on Rails, Ember.js, Elm, Elixir, Phoenix, React, Vue and the web.
If you enjoyed this article, you may be interested in the occasional newsletter.

I am now available for project work. I have availability to build greenfield sites and applications, to maintain and update/upgrade existing applications, team augmentation. I offer website/web application assessment packages that can help with SEO/security/performance/accessibility and best practices. Let’s talk

comments powered by Disqus