CODEWITHSUNDEEP
node.jsangularsassangular-clibootstrap-4
jProg2015
jProg2015

Reputation: 1128

Unable to load Bootstrap into Angular CLI project

I've got a problem adding Bootstrap 4 RC6 to my Angular CLI project and I'm not sure what's going on - or how to describe it. My steps to create the project were as follows:

I've created a new project using Angular CLI with styles set to SASS using ng new My_New_Project --style=sass.

I've install node-sass using npm install node-sass --save-dev.

I've installed bootstrap 4 RC6 using npm install [email protected].

At this point I added @import '~bootstrap' to my existing styles.scss and I'm getting a weird error as follows:

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed:
undefined
  ^
      Invalid CSS after "if": expected "{", was "(typeof jQuery === "
      in C:\<path>\node_modules\bootstrap\dist\js\bootstrap.js (line 7, column 4)
 @ ./src/styles.scss 4:14-189
 @ multi ./src/styles.scss

Upvotes: 0

Views: 861

Answers (2)

Kamesh Kumar Singh
Kamesh Kumar Singh

Reputation: 651

First, you need to install bootstrap to your project. You can use the following command:

npm install bootstrap@latest --save

If you've already done installing the bootstrap, then use the following command to import it:

@import '~bootstrap/dist/css/bootstrap.min.css';

Upvotes: 0

Giga Songulashvili
Giga Songulashvili

Reputation: 459

try import bootstrap like this

@import '~bootstrap/dist/css/bootstrap.css';

also check the file structure

Upvotes: 2

Related Questions