Sass Bootstrap 4 in Phoenix 1.3

Dusty Candland | | Elixir, Phoenix, Bootstrap, Sass, Font Awesome

Add dependencies to assets/package.json

  • Add font-awesome, bootstrap, jquery to dependencies
  • Add sass-brunch and copycat-brunch to devDependencies
...
"dependencies": {
"phoenix": "file:../deps/phoenix",
"bootstrap": "4.0.0",
"font-awesome": "4.7.0",
"popper.js": "1.12.9",
"jquery": "3.3.1"
},
"devDependencies": {
"babel-brunch": "6.1.1",
"brunch": "2.10.9",
"clean-css-brunch": "2.10.0",
"uglify-js-brunch": "2.10.0",
"sass-brunch": "2.10.4",
"copycat-brunch": "1.0.9"
}
...

Change the app.css to app.scss

  • Delete assets/css/app.css
  • Add assets/css/app.scss
  • Include font-awesome and bootstrap
$icon-font-path: "/fonts/"; /* use fonts from priv/static/fonts/ */
@import "font-awesome";
@import "bootstrap";

...
// Overrides

Watch for changes in config/dev.exs

Add scss to the patterns config

  ...
live_reload: [
patterns: [
~r{priv/static/.*(js|scss|css|png|jpeg|jpg|gif|svg)$},
...

Update brunch-config.js

  1. We need to make sure app.scss loads last
  2. Add copycat config for the font-awesome fonts
  3. Configure scss to include bootstrap and font-awesome
  4. Add $, jQuery, and bootstrap to the globals
    stylesheets: {
joinTo: "css/app.css",
order: {
after: ["../priv/static/css/app.scss"]
}
},
...
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
copycat:{
"fonts" : ["node_modules/font-awesome/fonts"],
onlyChanged: true
},
sass: {
options: {
includePaths: ["node_modules/bootstrap/scss",
"node_modules/font-awesome/scss"], // tell sass-brunch where to look for files to @import
precision: 8 // minimum precision required by bootstrap-sass
}
}
...

npm: {
enabled: true,
globals: { // bootstrap-sass' JavaScript requires both '$' and 'jQuery' in global scope
$: 'jquery',
jQuery: 'jquery',
bootstrap: 'bootstrap' // require bootstrap-sass' JavaScript globally
}
...

I think that's it. Might have to cd assets && npm install and restart Phoenix.

Webmentions

These are webmentions via the IndieWeb and webmention.io. Mention this post from your site: