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?

Improve this question

1 Answer 1

Reset to default
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"
    },
Improve this answer
4
  • That is compiling ok, how do you reference teh bootstrap classes in your tsx file? Commented Sep 14, 2021 at 0:12
  • Sorry, I've worked it out Commented Sep 14, 2021 at 0:13
  • Can you please share the solution Commented Sep 14, 2021 at 1:24
  • This is how I reference the bootstrap container class in my webpart <div className="container"> Commented 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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.