Failed to find 'functions scss error in angular application

Issue

I have created a brand new angular 7 application and installed it with scss. After building the application I am getting the following error

My style.scss class has the following import

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

I can also see a functions files under bootstrap folder of node_modules

ERROR in ./src/styles.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/styles.css) Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: Failed to find 'functions' in [C:\Development\360-manager\src\WebUI2_0\manager-ui\node_modules\bootstrap\scss] at resolveModule.catch.catch (C:\Development\360-manager\src\WebUI2_0\manager-ui\node_modules\postcss-import\lib\resolve-id.js:35:13)

Solution

Use @import "~bootstrap/scss/bootstrap".
See: https://webpack.js.org/loaders/sass-loader

Control @import URL resolves the given URL in the runtime. To import styles from a node_modules path prefix it with a ~. So @import "~bootstrap/scss/bootstrap" imports everything from the folder: node_modules/bootstrap/scss/bootstrap

Answered By - szarghani