Unable to include Bootstrap using npm in angular-cli project

Question

I am trying to include bootstrap using npm in angular-cli project. After downloading it using npm, I am trying to use it by importing bootstrap.scss in styles.scss and including jquery and bootstrap.min.js in angular.json.

styles.scss

@import '~bootstrap/scss/bootstrap.scss';

angular.json

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

On compiling the code, getting this error.

ERROR in ./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: Can't resolve 'functions' in 'C:\EMS\prac-app\node_modules\bootstrap\scss'
    at doResolve (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\Resolver.js:180:19)
    at hook.callAsync (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (C:\EMS\prac-app\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:15:1)
    at resolver.doResolve (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:37:5)
    at hook.callAsync (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (C:\EMS\prac-app\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (C:\EMS\prac-app\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:42:38)
    at hook.callAsync (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn5 (eval at create (C:\EMS\prac-app\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:57:1)
    at resolver.doResolve (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\ModuleKindPlugin.js:23:37)
    at hook.callAsync (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn0 (eval at create (C:\EMS\prac-app\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (C:\EMS\prac-app\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
    at _fn1 (eval at create (C:\EMS\prac-app\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:24:1)

What exactly am I missing here?

Please check your bootstrap scss path in NodeModules, I think it should be inside dist folder. your path will be "bootstrap/dist/scss/bootstrap.scss" — Sneha Pawar
– Sneha Pawar, Commented Apr 1, 2019 at 6:20
In styles.scss: @import "node_modules/bootstrap/dist/scss/bootstrap.scss" — ferhado
– ferhado, Commented Apr 1, 2019 at 6:21
may u should consider to not use plain bootstrap because of jquery is not designed to work properly whit angular. Use ng-bootstrap.github.io/#/home which is bootstrap for angular whit out jquery. — Atomzwieback
– Atomzwieback, Commented Apr 1, 2019 at 6:22
I think you are doing wrong base on your console error ./src/styles.css you are importing scss file in css please check your styles file extension — Bhagwat Tupe
– Bhagwat Tupe, Commented Apr 1, 2019 at 6:25

Krzysztof Raciniewski · Accepted Answer · 2019-04-01 06:20:44Z

2

Try to use relative path in the scss file and remove scss extension:

@import '../node_modules/bootstrap/scss/bootstrap';

this works for me

answered Apr 1, 2019 at 6:20

Krzysztof Raciniewski

5,0043 gold badges23 silver badges44 bronze badges

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

Comments

Ganesh Pilli · Accepted Answer · 2019-04-01 06:22:20Z

2

Looks like the issue is with the path of the CSS file, try changing paths of file like below:

angular.json:

"styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "../src/styles.css"
    ],

or the issue may occur if you forgot to run npm install

answered Apr 1, 2019 at 6:22

Ganesh Pilli

1361 silver badge12 bronze badges

Collectives™ on Stack Overflow

Unable to include Bootstrap using npm in angular-cli project

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related