How to add bootstrap to sharepoint spfx webpart?

0
votes

Question

How can I add bootstrap and react-bootstrap to my custom SPFX Webpart?

Steps I have taken

  1. Add bootstrap, react-bootstrap and @types/bootstrap
  2. Overwrite defaulf bootstrap variables with my scss file
  3. Import scss file into my application

What is the problem?

Currently the custom webpart is not building and exits with an error I can't do nothing with. There is no semicolon missing.

This line is causing the error: @import "~bootstrap/scss/bootstrap"

Because I would like to overwrite certain default sass bootstrap variables I have to load bootstrap second. With Sharepoint's this is not really possible.

Bootstrap css loads fine with the following code, however my variables are not taken into consideration cause there are loaded on second place.

SPComponentLoader.loadCss("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css");

Error

 exited with code 2
Error - [webpack] 'dist':
./lib/webparts/webpartDgdmHelloworld/components/Theme.module.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./lib/webparts/webpartDgdmHelloworld/components/Theme.module.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(40:4) Missed semicolon
 @ ./lib/webparts/webpartDgdmHelloworld/components/Theme.module.css 1:14-155
 @ ./lib/webparts/webpartDgdmHelloworld/components/Theme.module.scss.js
 @ ./lib/webparts/webpartDgdmHelloworld/components/WebpartDgdmHelloworld.js
 @ ./lib/webparts/webpartDgdmHelloworld/WebpartDgdmHelloworldWebPart.js

Same happens when trying to use react-bootstrap in my SPFX webpart. The following occurs when importing it:

Error - [tsc] node_modules/@popperjs/core/lib/createPopper.d.ts(1,73): error TS1005: ';' expected.
Error - [tsc] node_modules/@popperjs/core/lib/modifiers/applyStyles.d.ts(1,13): error TS1005: '=' expected.
1
reactjssharepointspfx

1 Answers

1
votes

Your bootstrap theme file is not a module, you need to compile it directly (remove the .module. thing). Means, rename Theme.module.scss to Theme.scss. This may show a warning, ignore it - it's okay in your case, you don't use modules.

Import it simply with: import './Theme.scss'

That should do. Probably there is no need for SPComponentLoader in your case.

Regarding the react-bootstrap, it's a different story. It is compatible with typescript 3.9, SPFx is using typescript 3.7 out of the box. The easiest may be to upgrade your SPFx to use 3.9 instead of 3.7. To do so:

> npm uninstall -D @microsoft/rush-stack-compiler-3.7
> npm install -D @microsoft/rush-stack-compiler-3.9

Then modify the line in tsconfig:

  "extends": ..../rush-stack-compiler-3.7/",

with:

  "extends": ..../rush-stack-compiler-3.9/",

Keep in mind that this is not supported by Microsoft (they support only what they have tested properly), so you are basically on your own here.