/phoenix_sass

🔥Phoenix 1.4 with Sass Enabled ✨by Jeff Davis

Primary LanguageElixir

Phoenix 1.4 + Sass

A default installation of Phoenix with Sass enabled.

Build Status

Install Repo

Clone the repo to your local machine and install it.
$ git clone https://github.com/brandedux/phoenix_sass.git

$ cd phoenix_sass

$ mix deps.get

$ mix deps.compile

$ cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development

$ cd ..

$ mix phx.server

Roll Your Own

Phoenix

Create a new Phoenix app named "phoenix_sass".
$ mix phx.new phoenix_sass

We are almost there! The following steps are missing:
$ cd phoenix_sass

Then configure your database in config/dev.exs and run:
$ mix ecto.create

Start your Phoenix app with:
$ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:
$ iex -S mix phx.server

Start Up the App

$ mix deps.get

$ mix deps.compile

$ cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development

$ cd ..

$ mix phx.server

Setup Sass with Webpack

Modify webpack.config.js to accept .css or .scss extension and add sass-loader to dependencies.

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      }
    ]
  }
Install node-sass and sass-loader.

$ cd assets

$ npm install --save-dev node-sass sass-loader

Rename app.css to app.scss and change the path in app.js to reflect the updated file name.

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

At this point you can import scss files to the app.scss file.

Production

Ready to run in production? Please check the phoenix deployment guides.

Learn more