topic Re: How to use bootstrap in Custom Visual? in Developer

How to use bootstrap in Custom Visual?

Anonymous — Tue, 20 Sep 2022 07:12:42 GMT

I was trying to use the bootstrap for custom visual, but getting some error, the steps i did are

1- npm install bootstrap

2- using this line in visual.less

@import (less) "../node_modules/bootstrap/dist/css/bootstrap.css";

But I am getting the error on compilation.

The Error is

ERROR in ./style/visual.less
Module build failed (from ../../Users/VCHA/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../../Users/VCHA/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/less-loader/dist/cjs.js):

--bs-btn-padding-y: 0.375rem;
--bs-btn-font-family: ;
^
Unrecognised input.............

Please let me know how i can use the bootstrap in custom visual?

----Screenshot---

Re: How to use bootstrap in Custom Visual?

Anonymous — Tue, 20 Sep 2022 07:45:39 GMT

@dm-p @lbendlin @Hariharan_R @ibarrau

Re: How to use bootstrap in Custom Visual?

dm-p — Tue, 20 Sep 2022 08:09:40 GMT

Add bootstrap.css as an import directly in your visual.ts (I usually place it underneath the visual.less import). Bootstrap does not work with less.

Re: How to use bootstrap in Custom Visual?

Anonymous — Tue, 20 Sep 2022 08:14:38 GMT

Same issue is coming up even if i put the import in visual.ts

Re: How to use bootstrap in Custom Visual?

dm-p — Tue, 20 Sep 2022 08:28:44 GMT

Apologies - looks like Bootstrap 5 has some breaking changes from 4 (I haven't used it for a while in custom visuals).

It should work if you don't want to use less mixins (i.e. omit the (less) prefix). Using this in my visual.less works for me:

@import "~bootstrap/dist/css/bootstrap.css";

This seems to compile through webpack:

And, the classes are availabe in my visual's DOM:

Hopefully this should work for you too.

Good luck,

Daniel

Re: How to use bootstrap in Custom Visual?

dm-p — Thu, 22 Sep 2022 00:25:47 GMT

Hey @Anonymous - did this approach work for you?