Getting Semantic UI to Work with BrunchJS
This weekend I’ve been playing around with a Phoenix application. By default, it appears as if Phoenix uses Bootstrap, but I’m not a fan of Bootstrap, so I wanted to bring in Semantic UI. I ran into a problem, however, trying to configure my brunch-config.js file. (Phoenix uses brunch by default. You can turn it off, but I didn’t want to, because I wanted to get the full Phoenix experience, just without Bootstrap.)
Anyway, after a lot of trials and errors, I think I finally figured out how to make it work.
- From the terminal run mix phoenix.new to create your new Phoenix project.
- After that is done, run npm install semantic-ui and install Semantic UI. I installed mine in semantic/
- Open up semantic.json file and change the path for output.themes to “dist/assets/themes”
- Open up semantic/tasks/config/user.js on the next to last line add this line: gulpConfig.paths.assets.packaged = ‘../themes’;
- Open up brunch-config.js Change the conventions.assets value to: /^(semantic\/dist\/assets)/
- Add semantic/dist to the paths.watched array
- Change stylesheets.joinTo from a single value to an object with the key “css/app.css”: /^(semantic\/dist)/
- Delete web/static/css/app.css
Go back to the command line and navigate to where you installed semantic at and call “gulp build”.
Then run your phoenix project (mix phoenix.server)
Your stylesheets should now be Semantic UI.
Let me walk through these steps.
Step 3 is splitting themes into their own parent directory. We don’t need to copy everything over from semantic/dist just themes, and this step makes that a bit easier.
Step 4, user.js specifies where the icon files should be found. By default they’re in css/themes/…. but ours won’t be there, they’ll be in their own themes folder up one level, so we need to specify ../themes
Step 5 tells brunch where to pull our assets from (in this case, it’s going to pull our newly built themes directory in.)
Step 6 tells brunch to watch our dist folder for any changes.