Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
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
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---
Solved! Go to Solution.
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
Proud to be a Super User!
My course: Introduction to Developing Power BI Visuals
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
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.
Proud to be a Super User!
My course: Introduction to Developing Power BI Visuals
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Same issue is coming up even if i put the import in visual.ts
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
Proud to be a Super User!
My course: Introduction to Developing Power BI Visuals
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Hey @VivekChadha - did this approach work for you?
Proud to be a Super User!
My course: Introduction to Developing Power BI Visuals
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
12 | |
2 | |
1 | |
1 | |
1 |