1

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)

SuperStar518
  • 2,814
  • 2
  • 20
  • 35
Tom
  • 8,175
  • 41
  • 136
  • 267
  • @import "../node_modules/bootstrap/scss/bootstrap"; try something like this – TheParam Feb 13 '19 at 08:11
  • i tried that and still get error 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 '../node_modules/bootstrap/scss/bootstrap' in [ C:\Development\360-manager\src\WebUI2_0\manager-ui\src ] at resolveModule.catch.catch (C:\Development\360-manager\src\WebUI2_0\manager-ui\node_modules\postcss-import\lib\resolve-id.js:35:13) – Tom Feb 13 '19 at 09:26
  • I have exactly the same problem now and I'm trying to solve it. BTW .. try with something like @import "~bootstrap/scss/bootstrap.scss" – Georgi Feb 13 '19 at 12:26
  • try @import "~bootstrap/scss/bootstrap" – szarghani Apr 10 '19 at 12:06

2 Answers2

2

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

Ramin eghbalian
  • 2,348
  • 1
  • 16
  • 36
szarghani
  • 163
  • 6
  • 1
    Still gives me an error Failed to find 'bootstrap/scss/bootstrap' in my Angular 7.2 project. Bootstrap version is 4.4.1 – NiAu Jan 21 '20 at 13:43
1

Got this error when my project was configured to use css. Consider changing it to scss first. How to can be found here

Anand Rockzz
  • 6,072
  • 5
  • 64
  • 71