A Bootstrap 5 boilerplate, using Webpack 5, Babel, SCSS, etc.

License: MIT License

JavaScript 35.82% HTML 48.33% SCSS 15.85%

bootstrap5-webpack-boilerplate's Introduction

Hi there, I'm Dominik - aka noreading 👋

I'm a Developer, Coach and Learner!

🌱 I’m learning new things every day.
🧑‍💻 I love to teach kids how to code with Scratch and micro:bit.
🥅 My goal for 2024 is to contribute to more Open Source projects.

Connect with me:

Languages and Tools:

bootstrap5-webpack-boilerplate's People

Contributors

Stargazers

Watchers

bootstrap5-webpack-boilerplate's Issues

Compile times in development mode are slow

Hi! I'm testing you boilerplate and noticed that compile times in development mode are too slow. Each save on a scss file is taking 4 - 5 seconds to compile. Is there a way to speed up css save times?

vite js instead webpack and tailwindcss instead bootstrap?

hi Dominik, super Idee und sehr effizient die Repository.

Problem with compile

I just cloned this and wanted to test. Unfortunately not a single script is available after compile. I tried to include the BS scripts manually in the plugins part with new webpack.ProvidePlugin(), still nothing.
I manually modified the scripts for my liking:

  "scripts": {
    "build": "webpack --config webpack.config.js --mode production",
    "dev": "webpack serve --config webpack.config.js --mode development --port 8080"
  },

And here are my packages, if that helps:

    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.2",
    "@popperjs/core": "^2.9.2",
    "autoprefixer": "^10.2.5",
    "babel-loader": "^8.2.2",
    "bootstrap": "^5.0.1",
    "css-loader": "^5.2.4",
    "dotenv-webpack": "^7.0.2",
    "exports-loader": "^3.0.0",
    "fast-glob": "^3.2.5",
    "mime-types": "^2.1.30",
    "mini-css-extract-plugin": "^1.6.0",
    "node-sass": "^6.0.0",
    "path": "^0.12.7",
    "postcss": "^8.2.15",
    "postcss-loader": "^5.3.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^11.1.1",
    "sharp": "^0.28.2",
    "style-loader": "^2.0.0",
    "trash": "^7.1.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"

Of course, my versions are the following:
Node - 14.15..4
NPM - 7.11.2

Any ideas about why is could not compile with the Bootstrap scripts?

Or it is a known issue just left out from the readme by accident?

Popover and tooltips not working

Just came by this project looking for a solution why i can't get the tooltips and popovers aren't working and found out they don't work on this project also. Any idea why they aren't working on your project?

watch index.html in the browser

Hi,

Wehn I run npm run dev, the browser do not open the index.html, is there any extra configuration for that??

Thank you for the repository .

npm run dev failing

I am getting the error below after installing and running the dev server. The server appears to start successfully, but then throws the errror. Any idea what the cause might be?

➜ npm run dev

> [email protected] dev
> webpack-dev-server --open --config webpack.config.js --mode development

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:9090/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.2:9090/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:9090/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/dokoissho/GitHub/bootstrap/bootstrap5-webpack/public' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
/Users/dokoissho/GitHub/bootstrap/bootstrap5-webpack/node_modules/chokidar/lib/fsevents-handler.js:93
  const stop = fsevents.watch(path, callback);
                        ^

TypeError: fsevents.watch is not a function
    at createFSEventsInstance (/Users/dokoissho/GitHub/bootstrap/bootstrap5-webpack/node_modules/chokidar/lib/fsevents-handler.js:93:25)
    at setFSEventsListener (/Users/dokoissho/GitHub/bootstrap/bootstrap5-webpack/node_modules/chokidar/lib/fsevents-handler.js:149:16)
    at FsEventsHandler._watchWithFsEvents (/Users/dokoissho/GitHub/bootstrap/bootstrap5-webpack/node_modules/chokidar/lib/fsevents-handler.js:351:18)
    at FsEventsHandler.initWatch (/Users/dokoissho/GitHub/bootstrap/bootstrap5-webpack/node_modules/chokidar/lib/fsevents-handler.js:427:23)
    at FsEventsHandler._addToFsEvents (/Users/dokoissho/GitHub/bootstrap/bootstrap5-webpack/node_modules/chokidar/lib/fsevents-handler.js:516:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v20.0.0

Font file address error at build time

Hello,
The font file addresses are wrong at build time. The problem is in the google-fonts.scss file on lines 40-43. Please check these lines and correct the addresses.
version: v1.0.1

@mixin googleFont($font) {
  $fontFamily: map-get($font, "name");
  $folderName: map-get($font, "folder");
  $fileName: map-get($font, "files");
  $weights: map-get($font, "weights");
  @each $weight in $weights {
    $weightName: map-get($fontWeightNames, $weight);
    @font-face {
      font-family: "#{$fontFamily}";
      font-weight: $weight;
      font-display: swap;
      src: url("../../fonts/#{$folderName}/#{$fileName}-#{$weightName}.eot"); /* IE 9 - 11 */
      src: url("../../fonts/#{$folderName}/#{$fileName}-#{$weightName}.eot?#iefix") format('embedded-opentype'), /* IE 9 - 11 */
      url("../../fonts/#{$folderName}/#{$fileName}-#{$weightName}.woff2") format('woff2'),
      url("../../fonts/#{$folderName}/#{$fileName}-#{$weightName}.woff") format('woff');
    }
  }
}

Problem with npm run images

Hello,
When i run npm run images i get and error due to the use of require instead of import with trash package:

/var/www/bootstrap5-webpack-boilerplate/bin/images.js:12
const trash = require("trash");
              ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /var/www/bootstrap5-webpack-boilerplate/node_modules/trash/index.js from /var/www/bootstrap5-webpack-boilerplate/bin/images.js not supported.
Instead change the require of index.js in /var/www/bootstrap5-webpack-boilerplate/bin/images.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/var/www/bootstrap5-webpack-boilerplate/bin/images.js:12:15) {
  code: 'ERR_REQUIRE_ESM'
}

If i change to import and set type to module, i get another error.
How can it be fixed?

Using:
node: v16.14.0
npm: 8.13.2

noreading / bootstrap5-webpack-boilerplate Goto Github PK