dgamidov

dgamidov

Boostrap 4 + Sass installation in Phoenix 1.3

Hi folks,

Just a short instruction. Maybe it will help somebody.

Install boostrap with deps and Sass:

cd assets

npm install jquery --save-dev
npm install tether --save-dev
npm install bootstrap@4.0.0-beta.2 --save-dev
npm install popper.js --save-dev
npm install sass-brunch --save-dev

Delete old boostrap:

rm css/phoenix.css

Switch css to scss:

mv css/app.css css/app.css.scss

Edit css/app.css.scss:

@import "bootstrap"; 

Edit js/app.js:

import "bootstrap";

Edit brunch-config:

  stylesheets: {
    joinTo: "css/app.css",
    order: {
      after: ["web/static/css/app.css"] // concat app.css last
    }

  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    },
    sass: {
      options: {
        includePaths: ["node_modules/bootstrap/scss"], // Tell sass-brunch where to look for files to @import
        precision: 8 // Minimum precision required by bootstrap-sass
      }
    }
  },

  npm: {
    enabled: true,
    globals: {
      $: 'jquery',
      jQuery: 'jquery',
      Popper: 'popper.js',
      Tether: 'tether',
      bootstrap: 'bootstrap'
    }
  }

Most Liked

mbenatti

mbenatti

Just a Addition to this topic,
months ago I wrote a tutorial: https://gist.github.com/mbenatti/4866eaa5c424f66042e19cc055b21f83

dgamidov

dgamidov

Bootstrap 4 was released, so we can now use it:

npm install bootstrap@4.0.0 --save-dev

iwarshak

iwarshak

Thanks for sharing. I spent quite a while trying to figure out why my app.scss was being ignored. It seems that it had to be named app.css.scss for sass-brunch to pick it up.

dogweather

dogweather

Thank you so much for the post! Working for me.

Where Next?

Popular in Guides/Tuts Top

Morzaram
Hey guys I’ve made a guide on how to connect Quill to Phoenix. For the sake of formatting it might be easier to view it on my Notion Doc...
New
tfwright
I thought I’d share a small project I’m working on to gain some familiarty with LiveView in a Phoenix app. Github Repo Deployment It’s...
New
Logan
Here is an example of a Mix application that utilizes Cowboy to handle websocket connections. If anyone has an idea about making this wor...
New
bentanweihao
I wrote a thing: http://engineering.pivotal.io/post/how-to-set-up-an-elixir-cluster-on-amazon-ec2/ Hope this is helpful!
New
bluegene
Hi guys, I’ve been on a personal journey to learn Elixir for the past two years. During this journey I’ve been using the spaced repetiti...
New
fuelen
Hi all! Just want to share a small code snippet which allows writing CASE expressions using macro which is similar to cond. Here is an ...
New
georgeguimaraes
Another cool plugin for Neovim, GitHub - jmbuhr/otter.nvim: Just ask an otter! 🦦 makes it possible to run linters for embedded code, like...
New
nietaki
Just a quick heads up: There seems to be a bug in Erlang/OTP 21.3, which can cause some errors when making http requests. If you’re using...
New
mudasobwa
The post covering how to generate nifty types to use in @spec in compile time with macros. https://rocket-science.ru/hacking/2020/07/15/...
New
niku
I have published an elixir project with using Travis CI. I would like to share some tips & thoughts that I was getting through this ...
New

Other popular topics Top

srinivasu
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call th...
New
William
I would like to know that is there any online source for learning Phoenix Framework for building E-Commerce Store? Any advantage on build...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: https://hexdocs.pm/ecto/Ecto.Schema.html#module-...
New
malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
quazar
How to set Jason to encode all fields in ecto schema, I don’t care about security and implementing only is taking long list of attributes...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
chrisalley
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New

We're in Beta

About us Mission Statement