Using Bootstrap with Stencil Component

Stencil
1

How can we use Bootstrap for Styling Stencil Component. I have installed Bootstrap using “npm i” but not able to import it directly in Component file.

2

Hello,
I do not use stencil, but npm i does not install bootstrap. npm i installs what in package.json is defined. If there is no bootstrap, then …

Depends what you wanna use. See docs.

But the main reason I write here is, that css of bootstrap can cause (or caused at/on (what is right?) a project of mine) a problem with ionic modal. Modal is created, so no error is thrown, but not visible.

Best regards, anna-liebt

Best regards, anna-liebt

3

Ok I figured out how to work with it but not sure it that’s the best approach. Just include bootstrap css in the index.html file. You also need to set shadow to false in the Stencil Component. Now you can use bootstrap class directly inside the component.

I am looking if there is a way to use it without setting shadow to false.

4

I’ve attempted this recently and found some success using Stencil with the @stencil/sass plugin, and importing Bootstrap’s SCSS from source as needed. I haven’t found any decent resources on this, so I experimented.

I first made a src/scss/_global.scss file in my project that looks like this:

// Bootstrap globals
@import '../../node_modules/bootstrap/scss/_functions.scss';
@import '../../node_modules/bootstrap/scss/_variables.scss';
@import '../../node_modules/bootstrap/scss/_mixins.scss';

Then in the Stencil config I’ve ensured that these Bootstrap functions, variables and mixins are available to all of my Stencil components, using the Sass plugin:

stencil.config.ts:

export const config: Config = {
  // ...
  plugins: [
    sass({
      injectGlobalPaths: [
        'src/scss/_global.scss'
      ]
    })
  ],
  // ...
};

Fortunately, by themselves, these don’t add any actual CSS to the component output. They’re just tools we can use from within our components’ .scss stylesheets.

After that, depending on the web component I’m building, I might include some specific Bootstrap component .scss file. For example, if I was making a button component that just wanted to use Bootstrap’s button styles:

src/components/my-button/my-button.scss:

@import '../../../node_modules/bootstrap/scss/_buttons.scss';

// Custom styling can go here

Refer to the Bootstrap source code for more .scss files that you can include.

This is the best way I’ve found so far to import Bootstrap styles from their SCSS source code within Stencil components in a modular fashion, all without sacrificing the use of the Shadow DOM in the resulting web components.

Hope this helps!

3 Likes
5

Tremendously helpful. Thanks!
Do you have any tips on how to include bootstrap javascript by any chance (scoped to a web component)? I.e. I want to be able to reuse my components without requiring the hosting app to include Bootstrap & jQuery scripts.

1 Like
6

I didn’t try importing the JavaScript, it didn’t seem easy with its tight dependency on jQuery. I’d suggest managing interactivity with your own JS and CSS inside the web components.

7

The larger the project, the mоre often these processes occur, and the speed of implementation depends nоt least on how soon the functionality will “grow” in appearance. Using ready-made Bootstrap components and utilities, you can quickly introduce new functionality to the site and give it to users. Thus, it solves one оf the problems of the “idea — functional — layout” cycle. Bootstrap also has a ready-made 12-column grid on which components can be positioned. And it’s very convenient. But when I need to change the content on my site, I use this site instead of using different editors.The larger the project, the mоre often these processes occur, and the speed of implementation depends nоt least on how soon the functionality will “grow” in appearance. Using ready-made Bootstrap components and utilities, you can quickly introduce new functionality to the site and give it to users. Thus, it solves one оf the problems of the “idea — functional — layout” cycle. Bootstrap also has a ready-made 12-column grid on which components can be positioned. And it’s very convenient. But when I need to change the content on my site, I use this site instead of using different editors.