How to use SASS/SCSS with Phoenix framework?

Here's a working demo repo with the steps I took as commits:

https://github.com/sergiotapia/phoenix-sass-example

---

To use SASS/SCSS, you need to install the sass-brunch node package.

npm install --save sass-brunch

Then edit brunch-config.js so your plugins section looks like this:

// Configure your plugins
plugins: {
  babel: {
    // Do not use ES6 compiler in vendor code
    ignore: [/web\/static\/vendor/]
  },
  sass: {
    mode: "native" // This is the important part!
  }
},

---

Once you do that, any .sass or .scss files will work seamlessly.

Phoenix framework uses brunch for the asset pipeline.

From the docs:

Instead of implementing its own asset pipeline, Phoenix uses Brunch, a fast and developer-friendly asset build tool. Phoenix comes with a default configuration for Brunch and it will work out of the box, but it is very easy to bend it to our needs, add support for various script and style languages, like CoffeeScript, TypeScript, or LESS.

To add support for SASS, add 'sass-brunch' in your package.json in the project root as:

{
  "repository": {
  },
  "dependencies": {
    "brunch": "^1.8.1",
    "babel-brunch": "^5.1.1",
    "clean-css-brunch": ">= 1.0 < 1.8",
    "css-brunch": ">= 1.0 < 1.8",
    "javascript-brunch": ">= 1.0 < 1.8",
    "sass-brunch": "^1.8.10",
    "uglify-js-brunch": ">= 1.0 < 1.8"
  }
}

Then run npm install.

Phoenix framework also supports asset management without brunch as the default.

While creating a new project:

mix phoenix.new --no-brunch my_project

will create a project without brunch configuration. You need to setup a system that can copy the built assets into priv/static/ and also watch your source files to make automatic compilation on every change. Read the docs for more info.