Add SASS to your Phoenix Project

Created: May 19, 2019 17:19 | Updated: August 07, 2019 19:23
Tags: Elixir, Phoenix, Sass

Credit to Andrew Timberlake

Install sass and rename your app.css

cd assets
npm install node-sass sass-loader --save-dev
mv css/app.css css/app.scss

In webpack.config.js replace these lines:

// webpack.config.js

. . .

test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']

. . .

with this:

// webpack.config.js

. . .

test: /\.scss$/,
use: [
  MiniCssExtractPlugin.loader,
  {
    loader: 'css-loader',
    options: {}
  },
  {
    loader: 'sass-loader',
    options: {}
  }
]

. . .

and finally update a line in your app.js file from this:

// app.js

. . .

import css from "../css/app.css"

. . .

to this:

// app.js

. . .

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

. . .

And you are off to the races

Written by Alan Vardy. Let me know how I can make this better!