CODEWITHSUNDEEP
htmlcsstemplatesrolluprollupjs
rmartrenado
rmartrenado

Reputation: 1576

Is it possible to create a bundle with Rollup that injects HTML from a template?

I'm trying to build a IIFE (immediately-invoked function expression) bundle using Rollup.

I would like to bundle all together my JS, CSS, and then some HTML which the Javascript depends on. Check this image to get an idea:

enter image description here

Is there a way to tell Rollup that my input (entry point) is seguro-vida-hipoteca.js, and have this file import my SCSS and HTML so it will be automatically injected when somebody uses my library?

That would be, the resulting CSS in the head, and the HTML to some div that I would expect to exist in the dom, or just at the end of body.

Upvotes: 2

Views: 4222

Answers (1)

Umbo
Umbo

Reputation: 3142

Is there a way to tell Rollup that my input (entry point) is seguro-vida-hipoteca.js?

Sure, that's what the input option is for.

Injecting Sass in the head is easily accomplishable with plugins such as rollup-plugin-postcss:

// rollup.config.js
import postcss from 'rollup-plugin-postcss';

export default {
  // ...
  plugins: [
    postcss(),
  ],
}

import './style.scss'; // Now each stylesheet you import will
                       // be injected to <head>

About injecting/appending html, that is something you would normally do in your code and not through a plugin, although you can take advantage of Rollup to load template.html as a string (for example by using rollup-plugin-html):

import html from "rollup-plugin-html";

export default {
  // ...
  plugins: [
    html({
      include: "**/*.html",
    }),
  ],
}

import template from './template.html';

document.querySelector('#mydiv').innerHTML = template;

Side note

This seems to be a good use case for WebComponents. More info here.

Upvotes: 2

Related Questions