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
Just a Addition to this topic,
months ago I wrote a tutorial: https://gist.github.com/mbenatti/4866eaa5c424f66042e19cc055b21f83
4
dgamidov
Bootstrap 4 was released, so we can now use it:
npm install bootstrap@4.0.0 --save-dev
3
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.
2
dogweather
Thank you so much for the post! Working for me.
2
Popular in Guides/Tuts
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
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
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
I wrote a thing: http://engineering.pivotal.io/post/how-to-set-up-an-elixir-cluster-on-amazon-ec2/
Hope this is helpful!
New
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
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
Another cool plugin for Neovim, GitHub - jmbuhr/otter.nvim: Just ask an otter! 🦦 makes it possible to run linters for embedded code, like...
New
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
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
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
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
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
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
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
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
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set?
Thanks.
New
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
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
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
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors:
[WARN] - (starship::utils): Executing command ...
New







