I am trying to bundle my stylesheets which should use bootstrap v5. I can bundle my CSS files without a problem but I cannot get bootstrap to work. The bundler runs through, but bootstrap styles are not included.

What I did:

• I installed bootstrap with npm install bootstrap (https://getbootstrap.com/docs/5.0/getting-started/download/#npm)
• I included bootstrap into:
  • either my JS file with import 'bootstrap';
  • in my CSS with @import "node_modules/bootstrap/dist/css/bootstrap"; (This is not working because it tells me that my file is not found)

My rollup.config:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import { terser } from "rollup-plugin-terser";
import postcss from "rollup-plugin-postcss";
import cssnano from "cssnano";

export default [

  {
    input: "project/static/src/inputs/index.js",
    output: [
      {
        format: "esm",
        file: ""project/static/src/outputs/index.min.js",",
      },
    ],
    plugins: [
      postcss({
        extract: true,
        plugins: [cssnano()],
        extensions: [".css"],
      }),
      resolve({
        jsnext: true,
        browser: true,
      }),
      commonjs(),
      terser(),
    ],
  },
];

This config creates a separate CSS file because I set extract = true for the postcss plugin.

Then, in my CSS file:

@import "../modules/css/example.css";
@import "node_modules/bootstrap/dist/css/bootstrap";

.container-example {
  margin-top: -1.5rem;
}

In my JS

import "./example.css";
import 'bootstrap';

//more JS here 

I then run the bundler and it bundles my JS and also my styles. But it does not include any bootstrap styles... I can't seem to figure out why. Maybe because BS is all about SASS? Any ideas? Help is very much appreciated.