Import Bootstrap Webpack example to start off

1 year ago · 36c72b4ba1
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,3 @@
 node_modules/
 dist/

--- a/README.md
+++ b/README.md
@@ -1,3 +1,20 @@
 # cv

 Dejvino's Curriculum Vitae
 Dejvino's Curriculum Vitae

 ## Build

 ```
 npm install

 # Development - served on http://localhost:8080/
 npm run start

 # Production - output in ./dist/
 npm run build
 ```

 ## Info

 Uses Bootstrap and Webpack to compile a static HTML/CSS/JS web page that can be easily served from any webhosting.

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,33 @@
 {
  "name": "webpack",
  "description": "Include Bootstrap's source Sass and individual JavaScript plugins with Webpack.",
  "version": "0.0.0",
  "private": true,
  "repository": "twbs/examples",
  "license": "MIT",
  "stackblitz": {
    "startCommand": "npm start"
  },
  "scripts": {
    "start": "webpack serve",
    "build": "webpack build --mode=production",
    "test": "npm run build"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.7",
    "bootstrap": "^5.2.3",
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.1",
    "postcss-loader": "^7.3.0",
    "sass": "^1.62.1",
    "sass-loader": "^13.2.2",
    "style-loader": "^3.3.2",
    "webpack": "^5.83.1",
    "webpack-cli": "^5.1.1",
    "webpack-dev-server": "^4.13.3"
  }
 }
--- a/src/index.html
+++ b/src/index.html
@@ -0,0 +1,71 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Webpack</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <header class="d-flex justify-content-between align-items-md-center pb-3 mb-5 border-bottom">
        <h1 class="h4">
          <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-bootstrap-fill d-inline-block me-2" viewBox="0 0 16 16">
              <path d="M6.375 7.125V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762h1.898c1.184 0 1.81-.48 1.81-1.377 0-.885-.65-1.348-1.886-1.348H6.375v2.725z"/>
              <path d="M4.002 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4h-8zm1.06 12V3.545h3.399c1.587 0 2.543.809 2.543 2.11 0 .884-.65 1.675-1.483 1.816v.1c1.143.117 1.904.931 1.904 2.033 0 1.488-1.084 2.396-2.888 2.396H5.062z"/>
            </svg>
            <span>Webpack</span>
          </a>
        </h1>
        <a href="https://github.com/twbs/examples/tree/main/webpack/" target="_blank" rel="noopener">View on GitHub</a>
      </header>

      <h1>Build Bootstrap with Webpack</h1>
      <div class="col-lg-8 px-0">
        <p class="fs-4">You've successfully loaded the Bootstrap + Webpack example! It's loaded up with <a href="https://getbootstrap.com/">Bootstrap 5</a> and uses Webpack to compile and bundle our Sass and JavaScript. It also includes Autoprefixer.</p>
        <p>If this button appears blue and the link appears purple, you've done it!</p>
      </div>

      <button type="button" class="btn btn-primary me-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">Toggle offcanvas</button>
      <a id="popoverButton" class="text-success" href="#" role="button" data-bs-toggle="popover" title="Custom popover" data-bs-content="This is a Bootstrap popover.">Example popover</a>

      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
          <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <div>
            Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
          </div>
          <div class="dropdown mt-3">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
              Dropdown button
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </div>
        </div>
      </div>

      <hr class="col-1 my-5 mx-0">

      <h2>Guides</h2>
      <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
      <ul class="icon-list">
        <li><a href="https://getbootstrap.com/docs/5.2/getting-started/introduction/">Bootstrap quick start guide</a></li>
        <li><a href="https://getbootstrap.com/docs/5.2/getting-started/webpack/">Bootstrap Webpack guide</a></li>
        <li><a href="https://getbootstrap.com/docs/5.2/getting-started/parcel/">Bootstrap Parcel guide</a></li>
        <li><a href="https://getbootstrap.com/docs/5.2/getting-started/vite/">Bootstrap Vite guide</a></li>
        <li><a href="https://getbootstrap.com/docs/5.2/getting-started/build-tools/">Contributing to Bootstrap</a></li>
      </ul>

      <hr class="mt-5 mb-4">

      <p class="text-muted">Created and open sourced by the Bootstrap team. Licensed MIT.</p>
    </div>
  </body>
 </html>
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -0,0 +1,11 @@
 // Import our custom CSS
 import '../scss/styles.scss';

 // Import only the Bootstrap components we need
 import { Popover } from 'bootstrap';

 // Create an example popover
 document.querySelectorAll('[data-bs-toggle="popover"]')
  .forEach(popover => {
    new Popover(popover)
  })
--- a/src/scss/_icon-list.scss
+++ b/src/scss/_icon-list.scss
@@ -0,0 +1,22 @@
 // Example of a custom component

 .icon-list {
  padding-left: 0;
  list-style: none;

  li {
    display: flex;
    align-items: flex-start;
    margin-bottom: .25rem;

    &::before {
      display: block;
      flex-shrink: 0;
      width: 1.5em;
      height: 1.5em;
      margin-right: .5rem;
      content: "";
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto;
    }
  }
 }
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -0,0 +1,93 @@
 // Override Bootstrap's Sass default variables
 //
 // Nearly all variables in Bootstrap are written with the `!default` flag.
 // This allows you to override the default values of those variables before
 // you import Bootstrap's source Sass files.
 //
 // Overriding the default variable values is the best way to customize your
 // CSS without writing _new_ styles. For example, change you can either change
 // `$body-color` or write more CSS that override's Bootstrap's CSS like so:
 // `body { color: red; }`.


 //
 // Bring in Bootstrap
 //

 // Option 1
 //
 // Import all of Bootstrap's CSS

 // @import "bootstrap/scss/bootstrap";

 // Option 2
 //
 // Place variable overrides first, then import just the styles you need. Note that some stylesheets are required no matter what.

 // Toggle global options
 $enable-gradients: true;
 $enable-shadows: true;

 $offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);

 // Customize some defaults
 $body-color: #333;
 $body-bg: #fff;
 $border-radius: .4rem;
 $success: #7952b3;

 // Required
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";

@import "bootstrap/scss/type";
 // @import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
 // @import "bootstrap/scss/tables";
 // @import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
 // @import "bootstrap/scss/button-group";
 // @import "bootstrap/scss/nav";
 // @import "bootstrap/scss/navbar"; // Requires nav
 // @import "bootstrap/scss/card";
 // @import "bootstrap/scss/breadcrumb";
 // @import "bootstrap/scss/accordion";
 // @import "bootstrap/scss/pagination";
 // @import "bootstrap/scss/badge";
 // @import "bootstrap/scss/alert";
 // @import "bootstrap/scss/progress";
 // @import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
 // @import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal"; // Requires transitions
 // @import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
 // @import "bootstrap/scss/carousel";
 // @import "bootstrap/scss/spinners";
@import "bootstrap/scss/offcanvas"; // Requires transitions
 // @import "bootstrap/scss/placeholders";

 // Helpers
 // @import "bootstrap/scss/helpers";

 // Utilities
@import "bootstrap/scss/utilities/api";


 //
 // Custom styles
 //

@import "icon-list";

 body {
  padding: 1.5rem;
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,54 @@
 'use strict'

 const path = require('path')
 const autoprefixer = require('autoprefixer')
 const HtmlWebpackPlugin = require('html-webpack-plugin')

 module.exports = {
  mode: 'development',
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer:{
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' })
  ],
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            // Adds CSS to the DOM by injecting a `<style>` tag
            loader: 'style-loader'
          },
          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader'
          },
          {
            // Loader for webpack to process CSS with PostCSS
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  autoprefixer
                ]
              }
            }
          },
          {
            // Loads a SASS/SCSS file and compiles it to CSS
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
 }