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
I spent quite a bit of time trying to find a good configuration to build / test my Elixir app in CircleCI and then push an image to Docke...
New
I just finished a long process of configuring and debugging a Docker Compose-based dev environment. Several late-night hours! I think I’v...
New
Greetings fellow alchemists !
I have started to write an open-source interpreter in Elixir (https://github.com/nicolasdilley/dwarf-inter...
New
I was preparing to deploy a production application to AWS Fargate, and to practice I wanted to play with DNS polling and node discovery o...
New
Wrote this guide on how to integrate DropzoneJS with Phoenix Liveview. Hope it helps someone out!
https://sergiotapia.com/dropzonejs-dir...
New
I couldn’t find any guides that worked well with Phoenix 1.6.0 and esbuild. I hope this helps people test the waters and eases you into t...
New
Did you know that IO.inspect/2 returns the the first argument and accepts a label option as a second argument. This makes it a perfect to...
New
I wrote this blog post based on our experiences setting up continuous delivery for our first production umbrella Phoenix app. Coming from...
New
pipe into case? I use that fairly frequently…unless I’m misunderstanding what you’re wanting…could be… its still very early…
str = "Hell...
New
..or as and when you can think of one :icon_cool:
This thread my also be of interest: What took you way too long to figure out? :003:
New
Other popular topics
Hi everyone!
I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
Hi! May someone helps me, please!
I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
You’re a programmer, so you don’t need spoon feeding with the conventional drivel about “this is an integer.” No. You need to know what’s...
New
I have followed this StackOverflow post to install the specific version of Erlang.
And When I am running mix ecto.setup then getting fol...
New
I have an umbrella app.
Some of the apps inside depend on other apps in the umbrella, unsurprisingly.
I'm writing a test for one of t...
New
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this
"1000"
What is the ...
New
Hey,
Just curious what are the main benefits of Elixir compared to Clojure?
When is Elixir more useful than Clojure and vice versa?
Th...
New
Elixir appears to be a superior language to Python. I don’t see any advantage of Python over Elixir. Are there any?
New








