vishal-h
Working package.json for Phoenix bootstrap 5
I am trying to setup Phoenix/Bootstrap5 based on Using Bootstrap Native with Phoenix LiveView - Dashbit Blog
I am struggling with this for last 2 days. Nothing wrong with Elixir/Phoenix but the issues are related with npm and the dependencies.
I am just wondering if someone - that has the above example successfully running - can share their package.json
I am running this from Windows10. I believe it shouldn’t make a difference.
Marked As Solved
kokolegorille
I have this working, but on Linux… and never tried on Windows, but I think You might have some trouble with sass, and some crypto lib on Windows.
Anyway, this is on a standard project, updated for webpack 5. You need to make it work for Webpack 5 first.
Here is my relevant part of package.json
"dependencies": {
"@popperjs/core": "^2.9.2",
"bootstrap": "^5.0.1",
"bootstrap-icons": "^1.5.0",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
"phoenix_live_view": "file:../deps/phoenix_live_view",
"topbar": "^1.0.1"
},
"devDependencies": {
"@babel/core": "^7.14.3",
"@babel/preset-env": "^7.14.2",
"babel-loader": "^8.2.2",
"copy-webpack-plugin": "^9.0.0",
"css-loader": "^5.2.6",
"css-minimizer-webpack-plugin": "^3.0.0",
"mini-css-extract-plugin": "^1.6.0",
"sass": "1.32.*",
"sass-loader": "^11.1.1",
"terser-webpack-plugin": "^5.1.2",
"webpack": "^5.37.1",
"webpack-cli": "^4.7.0"
}
You might have to use node-sass instead of sass… on Windows
Here is my rule in webpack.config.js to load fonts
// Load fonts with the asset module, WP5
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
type: "asset/resource",
generator: {
filename: "../fonts/[hash][ext][query]"
}
}
And how I load bootstrap
# in app.js
import "bootstrap"
# in app.scss
@import "./custom_bootstrap";
// Import bootstrap-icons
@import "~bootstrap-icons/font/bootstrap-icons.css";
# in custom_bootstrap.scss
// Your variable overrides
@import "~bootstrap/scss/bootstrap.scss";
I use an intermediate custom_bootstrap to be able to customize bootstrap variables.
Popular in Questions
Other popular topics
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








