Bootstrap with jQuery and Popper.js (svelte)

Question

I wanted to add Bootstrap 4 with jQuery and Popper.js to RollupJS.

How to add them to the bundler?

I'm also using Svelte rollup template.

Answer 1

If I'm understanding you correctly, you are using the default Svelte Rollup template (probably through npx degit sveltejs/template), and you would like to add support for Bootstrap in your project.

If that's the case, then I believe it should be ...

npm i bootstrap
npm i jquery
npm i popper.js
npm i --save-dev rollup-plugin-css-only

In your rollup.config.js, add:

import css from 'rollup-plugin-css-only';

at the top with the rest of the imports. Also, in the plugins array, add:

plugins: [
  ...
  production && terser(),
  css({ output: 'public/build/extra.css'})
],

In src/main.js add imports for:

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

And in public/index.html add a link to the rollup generated extra.css:

<link rel='stylesheet' href='/build/extra.css'>

That at least gets bootstrap working for me through rollup, although I'm not using jquery or popper.js. In fact, I found this question when searching for the opposite problem -- How to use rollup with bootstrap without requiring jquery and popper.js.

Remember, you'll need to restart your dev server since auto-reload won't work for changes to rollup.config.js.