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: Installing Bootstrap 4 + Font Awesome from NPM in Phoenix Framework using sass · GitHub

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.

Where Next?

Popular in Guides/Tuts Top

WolfDan
So my main OS is Windows, I do must of my work with it, Elixir and vscode elixirls works just fine when you’re working only with elixir, ...
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
hlx
Typed my very first blog post ever, hope it will help some people https://henricus.xyz/roll-your-own-email-password-authentication-with-...
New
annad
I’m posting this for developers who are totally new to Phoenix like myself. This is all probably obvious to more skilled Phoenix develope...
New
tobleron
Ok, so I am so excited to share with you the most interesting setup I have made for Elixir/Phoenix today. Why? Because if you trust me, i...
New
niku
I write an article Parameterized testing with ExUnit.The key concept is using ExUnit.Case.register_test/4 such as ExUnit.start() defmod...
New
tonydang
I recently got inertia-phoenix (an Inertia.js adapter for Phoenix) working with Svelte. Setting up the server-side rendering (SSR) with S...
New
berts-4865
Here is a quick guide to uploading a file from the browser to DO spaces. It is crude, but will hopefully save sometime time and frustrat...
New
9mm
So I’m really loving elixir. BY FAR the most excruciating piece of learning a functional language for me is having to “transform” all my ...
New
GenericJam
Just leaving some breadcrumbs for future me and future others like me. Connect with TCP (not secured) - most servers will reject but use...
New

Other popular topics Top

New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 43757 214
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
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 54120 245
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

We're in Beta

About us Mission Statement