Adding Semantic UI Sass to Phoenix with Brunch

Sometimes adding Semantic UI as minified CSS is all you need for your Phoenix project. And for the times you want more fine-grained control over which modules to include, there’s Semantic UI Sass. Here’s how to get started with Phoenix 1.3 and Brunch.

Step 1: New Phoenix Project

$ mix phx.new my_app

Step 2: Add jQuery and Sass

$ cd assets
$ yarn add jquery
$ yarn add --dev sass-brunch

You can of course replace Yarn commands with NPM equivalents if you’d like.

Next, add jQuery as a global inside brunch-config.js:

npm: {
  globals: {
    $: "jquery",
    jQuery: "jquery"
  }
}

Example commit

Step 3: Add Semantic UI

Assuming you’re in project root:

$ cd assets
$ yarn add --dev semantic-ui-sass

Copy images and fonts from Semantic UI Sass GitHub repo to a new folder assets/static/semantic-ui.

Example commit

Step 4: Configuration

Edit brunch-config.js again:

plugins: {
  // etc...
  sass: {
    options: {
      includePaths: ["node_modules/semantic-ui-sass"]
    }
  }
},

Lastly, have Phoenix pick up the static assets you copied earlier by editing endpoint.ex:

plug Plug.Static,
  at: "/", from: :my_app, gzip: false,
  only: ~w(css fonts images js favicon.ico robots.txt semantic-ui)

Example commit

Step 5: Usage

Now we’re ready to use Semantic UI. Add this line to app.js:

import "semantic-ui-sass";

Rename app.css to app.scss and add the following:

$import-google-fonts: true;
$icons-font-path: '/semantic-ui';
$flags-image-path: '/semantic-ui';
// Fix: https://github.com/aniftyco/semantic-ui-sass/issues/3
i.flag:not(.icon)::before {
  background: url("#{$flags-image-path}/flags.png") no-repeat -108px -1976px;
}
@import 'scss/globals/all';
@import 'scss/elements/all';
@import 'scss/collections/all';
@import 'scss/views/all';
@import 'scss/modules/all';

You can remove the fix once this issue has been resolved or if you don’t need the flag module.

Now you can hand-pick the modules you want. Simply replace all with the exact module names that you want to include.