To resolve the problem in your Angular 6 angular.json file, simply include the bootstrap or font-awesome CSS files as shown below:

   "styles": [
          {
            "input": "./node_modules/bootstrap/dist/css/bootstrap.min.css"
          },
          {
            "input": "./node_modules/font-awesome/css/font-awesome.min.css"
          },
          "src/styles.css"
        ],

The path it's currently taking is incorrect. To correct this, we should specify the path as

../node_modules/bootstrap/dist/css/bootstrap.min.css

node_modules/bootstrap/dist/css/bootstrap.min.css

It worked perfectly for me!

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

The solution that finally resolved my issue:

1/   Remove the "node-modules" folder
2/   Run the command "npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1977767d7c346a78a8a565164">[email protected]</a> --save"
3/   Execute "npm install"
4/   Finish with "npm rebuild node-sass"

I encountered a similar issue and found a solution that worked for me:
within the angular.json file, make sure to include one of the following declarations (be mindful of "." and "/"):

"styles": [
          {
            "input": "./node_modules/bootstrap/dist/css/bootstrap.min.css"
          },
          {
            "input": "./node_modules/font-awesome/css/font-awesome.min.css"
          },
          "src/styles.css"
        ],

or

"styles":
         "src/styles.css",
         "node_modules/font-awesome/css/font-awesome.css"       

Remember to rebuild the project in order to see the changes take effect

Encountering the identical issue, I discovered that the solution lies within your file path adjustment. Take a moment to inspect and rectify it in the following manner.

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

            ],

alternatively, you can try:

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

        ],

The mistake lies in the path taken. Make sure to add src/ before style.css.

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

This issue has come up multiple times while starting new projects.

• Ensure that the location of bootstrap.min.css matches the path specified in the error message and angular.json
• Remember to stop the application before editing the angular.json file
• Then, restart the application

The configuration should look like either:

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

or

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

depending on the specific path mentioned in the error message.

Make sure to include Bootstrap in the angular.json configuration file instead of adding it directly to the styles.css file. This is important because Bootstrap is written in SCSS, not CSS.

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

It worked like a charm!

"styles": [{
    "input": "./node_modules/bootstrap/dist/css/bootstrap.min.css"
  },
  {
    "input": "./node_modules/ti-icons/css/themify-icons.css"
  },
  "src/assets/icon/icofont/css/icofont.min.css",
  "src/styles.css"
]

Dealing with this particular issue was quite challenging for me. The solution involved carefully examining the path and making adjustments as outlined below:

"styles": [
          "node_modules/@nebular/theme/styles/prebuilt/default.css"
        ],

I encountered a similar issue but found a solution that worked for me.

 "styles": [
          "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "node_modules/bootstrap/dist/css/bootstrap.css",
          "src/sass/styles.scss"
        ],

Additionally, I discovered another approach that also resolved the problem.

"styles": [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "./node_modules/bootstrap/dist/css/bootstrap.css",
          "src/sass/styles.scss"
        ]

I encountered a similar problem, but found a solution that worked for me.

Within my angular.json file:

"styles": [             
            "src/styles.css"              
        ],

In my styles.css file:

@import "~../node_modules/bootstrap/dist/css/bootstrap.min.css";

When faced with a similar problem, I found a solution by using the following path format without including the dot (.) and slash (/):

"node_modules/bootstrap/dist/css/bootstrap.min.css",

Encountering a similar issue while using ngx-toastr with Angular 8, I found a solution by arranging the .css style references in a specific order within the angular.json file:

        "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css",
          "node_modules/ngx-toastr/toastr.css" 
        ],
        "scripts": [
        ]

Additionally, I organized the @imports within the styles.css file as follows:

 @import '~bootstrap/dist/css/bootstrap.min.css';
 @import '~ngx-toastr/toastr.css';

Following this structure resolved the issue at hand.

I encountered a similar issue where I attempted to solve it by uninstalling and reinstalling the Bootstrap package, but unfortunately, it did not resolve the problem.

ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css Module not found: Error: Can't resolve 'D:\angular\node_modules\bootstrap\dist\css\bootstrap.min.css' in 'D:\angular\jsonFile'

The path specified in my angualr.json was

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

However, removing the preceding dots from the path ended up being the solution for me.

"node_modules/bootstrap/dist/css/bootstrap.min.css"

One approach to solve the issue is by following these steps:

1. Open up angular.json and navigate to the styles section. Insert the lines below:
   
   "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],

Alternatively, you can try this configuration as well:

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

Give both a shot - the second option did the trick for me.

2. Access the file labeled "styles.css" and include this line of code:

 @import '~bootstrap/dist/css/bootstrap.min.css';

Encountered a similar problem when setting up a fresh angular 7 project. After installation, running npm start triggered an error message: ERROR in multi ./src/styles.sass. To address this issue, I checked the angular.json file:

      "styles": [
         "src/styles.sass"   <--  Identified that I had styles.scss instead of styles.sass
       ],

I simply renamed the file from styles.sass to styles.scss since it was the one existing in the project directory, and then ran npm start once more. This solution successfully resolved the issue for me.

After encountering the same error, I decided to update by using the npm update command. In order to fix the issue, I made some changes to my angular.js file and removed 'F:\xxxx\node_modules\ngx-select-dropdown\dist\assets\style.css' from the styles as the css file was no longer present there. After saving the changes, I stopped my angular cli and ran ng serve again, which resolved the issue and everything started working fine.

You can find more information about this at https://github.com/manishjanky/ngx-select-dropdown/issues/112. The latest version of ngx-select-dropdown does not require the style.css anymore, hence I removed it from my project. That's all.

The issue at hand arises from an incorrect file path.

Consider using "./node_modules/bootstrap/dist/css/bootstrap.min.css" rather than "../node_modules/bootstrap/dist/css/bootstrap.min.css"

In my opinion, the solution to this problem is quite simple. The issue lies in the path. Simply typing down ./ or entering input will not solve it. If you are encountering the error ""ERROR in multi ./node_modules/bootstrap/dist/css/bootstrap.min.css"", it indicates that you have not installed it in the correct location. If you are following instructions from a book or another source, an easy fix would be to open Command Prompt, navigate to your project folder, and install bootstrap there. Alternatively, provide the full path to bootstrap in the angular.json file.

Have you ever wondered why you should modify the angular.json file?

 "styles": ["styles.scss"],
 "scripts": []

Despite this, your global style remains in styles.css

https://i.sstatic.net/ioJXY.png

It is important to have the style.scss file in place. The error is caused by missing the style.scss file.

To include the bootstrap.min.css file in your project, you have two options:

@import ~/bootstrap/dist/css/bootstrap.min.css;

Alternatively, you can add the bootstrap file to the angular.json (or cli.json in Angular 5 and earlier) file under styles [].

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

Make sure to specify the correct path for the parser to locate where bootstrap is installed.

After making adjustments in angular.json, I successfully updated the styles by changing:

"styles": ["src/styles.css"]

to

"styles": ["styles.css"]

The changes were effective and everything is working smoothly now!

Ensure that the files linked under 'styles' and 'scripts' are present in the node_modules folder. I encountered this issue when updating packages in my project, where some files referenced in the Angular CLI JSON were missing. The problem was resolved by including the necessary files. Hopefully, this information proves helpful.

Could the issue be related to bootstrap? Here's a possible solution: Step 1. Delete "../node_modules/bootstrap/dist/css/bootstrap.min.css" Step 2. Navigate to styles.css Include bootstrap by inserting this line @import "~bootstrap/dist/css/bootstrap.css"; Following these steps resolved the compilation errors I encountered.

Give this command a try:

Try running npm rebuild node-sass

For Angular 6, make sure to remove the line "./node_modules/bootstrap/dist/css/bootstrap.min.css" from your angular.json file in order for it to function properly.

Once you do this, everything should work fine!

Here is what worked for me: "styles": ["./node_modules/bootstrap/dist/css/bootstrap.min.css","src/styles.css"],

The journey began from beyond the confines of the project directory, requiring you to establish a connection to the 'src' and point them towards the 'styles.css' file. Take note:

"src/styles.css"

~Khai Lim