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"
}
}
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
.
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)
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.