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: Installing Bootstrap 4 + Font Awesome from NPM in Phoenix Framework using sass · GitHub
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
Popular in Guides/Tuts
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
A question I had when first learning contexts and Ecto was how to expand the default context API to support more flexible queries. Usuall...
New
Hi everyone!
I’m the founder of Render, a new cloud provider with native support for Elixir. When we launched Elixir support the most po...
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
I just wrote a simple guide on how you can setup a productive elixir development environment in vim.
Its really easy, just a few steps. ...
New
I recently got inertia-phoenix (an Inertia.js adapter for Phoenix) working with Svelte. Setting up the server-side rendering (SSR) with S...
New
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
I recently generated the boilerplate for a new mix app using the Phoenix 1.3.1 phx.new generator and realized that the structure of the w...
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
When we were figuring out how to use Phoenix LiveView we got stuck a few times.
So in order to save other people time, we created a comp...
New
Other popular topics
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 the...
New
lets say i have a sample like
a = 20; b = 10;
if (a > b) do
{:ok, "a"}
end
if (a < b) do
{:ok, b}
end
if (a == b) do
{:ok, "equa...
New
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help.
Where are they similar?
Where do they differ the m...
New
After calling mix ecto.create I get this error:
17:00:32.162 [error] GenServer #PID<0.412.0> terminating
** (Postgrex.Error) FATAL...
New
Hi everyone,
One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
Please see the new poll here: Which code editor or IDE do you use? (Poll) (2022 Edition)
It’s been a while since we first asked this, I...
New
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar.
I p...
New
Hello!
Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
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
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance










