Unable to include Bootstrap using npm in angular-cli project

2
votes

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?

2
angularbootstrap-4angular-cli
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
In styles.scss: @import "node_modules/bootstrap/dist/scss/bootstrap.scss" - ferhado
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
This should do @import "~bootstrap/scss/bootstrap"; - Manish
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

2 Answers

2
votes

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

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

this works for me

2
votes

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