2

Am trying to use bootstrap and have 1 styles.scss file to compile all the of its css. I have added those paths to the angular.json but still get the following error:

ERROR in multi ./src/scss/styles.scss ./node_modules/bootstrap/dist/css/bootstrap.min.css Module not found: Error: Can't resolve '/User/Project/src/scss/styles.scss' in '/Users/Project'

I have read many posts such as:

They all point out that in the angular.json file the paths are absolute basically. However I have made those changes, believe that the paths I entered are correct but still get this error.

Any hints on what I'm doing wrong here?

Angular.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/expoapero-front",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/scss/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js"
            ],

Absolute paths to both files mentioned in the error message:

  • src/scss/styles.scss
  • node_modules/bootstrap/dist/css/bootstrap.css
Seb
  • 363
  • 1
  • 18
  • Are you sure the file exists in src/scss/styles.scss? and if so have you checked for errors in the code? – chrismclarke Sep 01 '19 at 14:08
  • The file exists with this path. What kind of errors in the code should I be looking for? The one I see in the console as well as in the terminal is the one in the question. I don't get anything else... – Seb Sep 01 '19 at 15:03
  • You can try removing all the code from the file. Alternatively you could try move the file to src/styles.scss, and see if it runs from there. From what you have shown it should work, so I think there is something somewhere else. You could also try create a stackblitz to share and debug – chrismclarke Sep 01 '19 at 15:05
  • if you can share your code on github i would love to take a look – Tony Ngo Sep 01 '19 at 15:22

2 Answers2

0

First of all, you need to check your node_modules folder. bootstrap is not comes by-default. please check package.json for 

    "dependencies": {
...
    "bootstrap": "^<version_number>",
...}

otherwise you need to install bootstrap by following command:

npm install --save bootstrap

similar thing for jQuery as well.

zaki.i
  • 1
  • 3
  • I did install bootstrap and I can find it in the node_modules folder. It is also visible in the package.json. – Seb Sep 01 '19 at 15:01
0

First of all

Do you see bootstrap folder in node_modules ? And did you already install required package ?

Secondly after install you need to restart your server if you modify your angular.json

Tony Ngo
  • 19,166
  • 4
  • 38
  • 60
  • I do see the bootstrap folder in the node_modules and the required package. Also I did restart the server every time I modified the angular.json. – Seb Sep 01 '19 at 15:02