0

I have installed [email protected] on my machine and included it in my project with 'import ~bootstrap/scss/bootstrap'.

When I run gulp serve I get the following error:

[13:46:14] Error - [webpack] 'dist':
./lib/webparts/mslHomePage/components/MslHomePage.module.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??postcss!./lib/webparts/mslHomePage/components/MslHomePage.module.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(40:4) Missed semicolon
 @ ./lib/webparts/mslHomePage/components/MslHomePage.module.css 1:14-161
 @ ./lib/webparts/mslHomePage/components/MslHomePage.module.scss.js
 @ ./lib/webparts/mslHomePage/components/MslHomePage.js
 @ ./lib/webparts/mslHomePage/MslHomePageWebPart.js

This doesn't happen if I don't import react-bootstrap.

This is what I have installed:

[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

I'm thinking that there is a problem with the bootstrap CSS that is getting picked up but I can't think what I can do about it.

Any suggestions?

1 Answer 1

0

I am sharing the steps that I did to add bootstrap to my spfx project

npm install bootstrap@4 --save 

In .ts file add the following with correct paths

import * as bootstrap from "bootstrap";
require('../../../node_modules/bootstrap/dist/css/bootstrap.css');
require('../../../node_modules/bootstrap/dist/css/bootstrap.min.css');

In config.json add the following

"externals": {
   
     
    "jquery": {
    "path": "node_modules/jquery/dist/jquery.min.js",
    "globalName": "jQuery"
    },
    "bootstrap": {
    "path": "node_modules/bootstrap/dist/js/bootstrap.min.js",
    "globalName":"bootstrap"
    },
     
      "jqueryui": "node_modules/jqueryui/jquery-ui.min.js"
    },
4
  • That is compiling ok, how do you reference teh bootstrap classes in your tsx file? Sep 14, 2021 at 0:12
  • Sorry, I've worked it out Sep 14, 2021 at 0:13
  • Can you please share the solution
    – Saira
    Sep 14, 2021 at 1:24
  • This is how I reference the bootstrap container class in my webpart <div className="container"> Sep 14, 2021 at 7:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.