Working package.json for Phoenix bootstrap 5

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.