How to add bootstrap to sharepoint spfx webpart?

Question

Question

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

Steps I have taken

Add bootstrap, react-bootstrap and @types/bootstrap
Overwrite defaulf bootstrap variables with my scss file
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 spcomponentloader 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.

Nikolay · Accepted Answer · 2021-06-13 18:15:47Z

2

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.

edited Jun 13, 2021 at 18:15

answered Jun 13, 2021 at 17:55

Nikolay

12.6k2 gold badges29 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KiwiCoder Over a year ago

Hi Nikolay, You definitely owe me a beer! Thanks a lot for you solid and precise answer. It worked out of the box after following your instructions. Thanks! Kevin.

Collectives™ on Stack Overflow

How to add bootstrap to sharepoint spfx webpart?

Question

Steps I have taken

What is the problem?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Question

Steps I have taken

What is the problem?

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related