angular-cli: Error in multi styles

Paths in angular-cli.json are relative to the project root (src/ normally). For instance, you have the src/styles.css file, but in angular-cli.json it’s listed only as styles.css.

I solved in the following way. I am using Angular 7. During ng new my-app when prompted i took the sass option, as a result the style file was created with the name - styles.scss but what is referred in angular.json is styles.sass, I changed the extension to .scss in angular.json and boom, it’s working now.

Hope it helps.

Another problem could be the missing of one of the styles. For example, if you have:

../node_modules/bootstrap/dist/css/bootstrap.min.css, ../node_modules/xxx/xxx/xxx.css, ../node_modules/yyy/yyy/yyy.css

And the xxx.css is missing - Error thrown will be Error in multi styles. Check the path for every module or asset.

I had the same issue. But I have solved it. Main error is in the scripts and css which are coming from the ‘node_modules’ folder. Go to ‘.angular-cli.json’ file and delete all ‘node_modules’ files and manually type the path of your all SCRIPTS and CSS …

Thanks

@filipesilva :thanks…it works. So the path in angular-cli.json references to src/<filename>. So if your path is some directory on same level as src say node_modules then in angular-cli.json reference the file as …/node_modules/<rest of path>

Angular 7 needs style file’s relative path from main project folder, so in angular.json make sure all references to styles.scss include src/: "styles": [ "src/styles.scss" ],

Moreover, when you reference a npm package css/scss files in your styles.scss do it with ~ like so: @import '~font-awesome/scss/font-awesome';

Can we get this issue reopened? I also encountered the error on a clean install with v7.3

I think it is because of the problem with bootstrap, try this: Step 1. Inside .angular-cli.json file

“styles”: [ “styles.css”, “…/node_modules/bootstrap/dist/css/bootstrap.min.css” ]

Remove “…/node_modules/bootstrap/dist/css/bootstrap.min.css”

Step 2. Go to styles.css

Import bootstrap by adding this line @import “~bootstrap/dist/css/bootstrap.css”;

These steps solved the errors I got during the building process.

ERROR in multi …/node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css Module not found: Error: Can’t resolve ‘C:\xampp\htdocs\node_modules\bootstrap\dist\css\bootstrap.min.css’ in ‘C:\xampp\htdocs\Profile’ i ｢wdm｣: Failed to compile. this error can occur in this bootstrap path…but when i change the path of bootstrap file then no error can occur. no error can occur with this path:- “node_modules/bootstrap/dist/css/bootstrap.min.css” Anyone can tell me the logic behind this why this happen??

I try this and it works for me “styles”: [ “./node_modules/bootstrap/dist/css/bootstrap.min.css”, “./src/styles.scss” ],

If you have this error in angular and angular-cli You should use like below: “…/node_modules/bootstrap/dist/css/bootstrap.css” Because your Index.html and .angular-cli.json files are not in the same folder!

Here is what I did to make it work!

1. find “styles”: [] in angular.json file.
2. delete “…/node_modules/bootstrap/dist/css/bootstrap.min.css”,
3. change “/src/styles.css” to “src/styles.scss”,
4. change file “styles.css” to “styles.scss”

I had issue when I newly create project while serving it. Error was ERROR in multi ./styles.sass Just renamed all "styles": [ "src/styles.sass" ]to "styles": [ "src/styles.scss" ]in angular.json file because main css file was style.scss

@filipesilva Thanks that helped me fix my issue