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.