Error in multi styles

[hnguyenec]

OS?

Windows 7 x64

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0.-beta.15
node: 4.4.7

Repro steps.

The app was created with angular-cli: ng new
I added semantic.min.css under src/assets folder

in angular-cli.json,
"apps" : [
{
"styles": [
"../src/assets/sematic.min.css",
"styles.css"
],
}
]

The log given by the failure.

run: ng serve

ERROR in multi styles
Module not found: Error: Can't resolve 'c:\working\ng2\reddit\src\assets\sematic.min.css' in 'c:\working\ng2\reddit\node_modules\angular-cli\models'
@ multi styles

Mention any other details that might be useful.

---

[filipesilva]

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.

[RukGas]

Have same issue.. Did you find any solution for this ?

[nilaysaha]

@filipesilva :thanks...it works. So the path in angular-cli.json references to src/. 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/

[lawmbass]

@filipesilva Thanks that helped me fix my issue

[djpysu]

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.

[devsubhajit]

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

[gulamabbas]

@ShaadH Its really silly that copy/pasted path throws an error. I had seen your comment 3 hours ago, but dint try. Finally I thought to give it a try and boom. Thank You!

[JustinZhaowilson]

I copy and pasted the bootstrap URL from another project that worked, but didn't work in my new project.
Now fixed. node_module worked in the old project but in new project needed to be node_modules. In other words the folder structure was different for a new project to that of an old project, even though both were auto generated by Angular CLI.

A fix could be double checking that the URL you copied matches the location of the file you are referencing.

[ADoosti]

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!

[Bridgeway]

I had this problem but it was due to a simple typo in the angular.json - I had left "" as a style value in the projects architect build options styles.

It's a good job I spotted it as the error message in this instance is useless.
Incidentally, I don't have angular-cli-json file in my project !

[fawzi2010]

Hello,
I have this error, someone can help me? thanks
ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.css ./src/styles.scss
Module not found: Error: Can't resolve 'C:\Users\foued\node_modules\bootstrap\dist\css\bootstrap.css' in 'C:\Users\foued\mon-premier-projet'

[meehol]

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';

[mmamoonkhan]

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??

[meehol]

You gotta use path that’s relative from to the main folder of your project.

[ManjunathCH12]

I replaced this styles from angular.json "styles": ["src/styles.css"] to , "styles": ["styles.css"] It worked for me!

[kalikane]

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.

[anmolsrepo]

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.

[PradipShrestha]

@anmolsrepo: 👍 You saved me from wasting a day.

[andygup]

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

[kkuruva-rpx]

Thank you @anmolsrepo . That fixed the problem.

[BraianS]

Thanks @anmolsrepo .

[epontes]

Need fix it in angular-cli ? I face the same problem, works well when change the file in angular.json, but would be good If this file generated by angular-cli.

[dreadfear]

Does anyone have the solution to this problem? Older version works fine but not this 7.3

[mard0n]

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

[dphochman]

Also, verify that "styleext": "scss" in angular.json under the app's schematics section.
A friend of mine had it set to "sccs", and wasted an hour chasing down the solution.

[AdelekeAmoo]

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

[Mudassir-Idealake]

Can anybody help me with this?
ERROR in multi ../node_modules/aos/dist/aos.css ./src/styles.css
Module not found: Error: Can't resolve 'C:\node_modules\aos\dist\aos.css' in 'C:\Angular6Project'

I included aos for animation and sliding and it was working fine.
But on the very next day this issue appeared.....

[duoduoren]

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"

[Mudassir-Idealake]

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"

Thank you so much

[hembk44]

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.

It worked. Thank you

[nvmnghia]

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.

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';

This is a breaking change...

[combine13]

I had the same issue with a brand new angular 7 project. Just Installed it, npm start and got the error: ERROR in multi ./src/styles.sass
So I opened angular.json and:

          "styles": [
             "src/styles.sass"   <--  I had styles.scss file, not this styles.sass
           ],

I just renamed styles.sass to styles.scss because that file was present in the project folder and npm start again. This resolved my issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}