Question

How can I import Bootstrap from my node_modules/ into a js file without using node/express?

Introduction

I have installed Bootstrap5 in my Yarn monorepo because I don't wanna use CDNs, and I think is more flexible to configure with SASS if I have all the bootstrap package inside node_modules/.

yarn add bootstrap @popperjs/core

After compiling the Bootstrap scss and merging it with my custom stylesheets, I have created the following html code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Company</title>
    <link rel="stylesheet" href="css/styles.css" />
  </head>

  <body>
    <nav >
      <div >
        <a  href="#">
          <img
            src="../assets/images/logo/logo-transparent.png"
            alt="Company"
            width="40"
            height="40"
          />
        </a>

        <button
          
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span ></span>
        </button>

        <div  id="navbarNav">
          <div >
            <a  aria-current="page" href="#">Home</a>
            <a  href="#">About</a>
            <a  href="#">Careers</a>
            <a  href="#">Contact</a>
          </div>
        </div>
      </div>
    </nav>
  </body>
</html>

How can I include the Bootstrap JS modules without using CDNs?

In the official docs of Bootstrap, it says that we can import all the JavaScript stuff with:

<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
  crossorigin="anonymous"
></script>

But... as I have added Bootstrap to my project via Yarn (just for customizing the styles), I have thought to create my own script.js file to import everything from node_modules:

index.html:

<script type="module" src="js/main.js"></script>

js/main.js

import "bootstrap/dist/js/bootstrap.min.js"; // Just import everything from bootstrap

But I am getting the error:

Uncaught TypeError: Failed to resolve module specifier "bootstrap". Relative references must start with either "/", "./", or "../".

Also, inside index.html, if I do:

<script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

it works OK, but I don't like the ../../../node_modules/. How can I handle this?

--Note: I am not using node/express in my project, just HTML, JavaScript and SCSS.

CodePudding user response：

You might download the bootstrap file from the CDN server and serve it with the rest of your project. That way you aren't relying on a CDN or node/node modules.