Getting an error in multi ./src/styles.scss when I try to deploy my angular app to heroku

Question

When I try to deploy my angular app to heroku I'm getting a weird error.

I've tried switching the styles path in angular.json, but that doesn't seem to fix the issue. I'm pretty sure it's a path issue, but I cannot seem to fix it.

This is showing that I've switched it from "sass to scss"

"@schematics/angular:component": {"style": "scss"}

This is my current path

"styles": ["src/styles/global/global-styles.scss"]

This is my global-styles.scss

@import "~font-awesome/css/font-awesome.css";
@import "~bootstrap/dist/css/bootstrap.css";

I want this to build to heroku, but instead its rejected and giving me this error:

remote: ERROR in multi ./src/styles.scss ../node_modules/font-awesome/css/font-awesome.css
remote: Module not found: Error: Can't resolve '/tmp/node_modules/font-awesome/css/font-awesome.css' in '/tmp/build_e2cd2f4e9e4c7e4749537f06bef83c35'

Tony · Accepted Answer · 2019-08-06 03:11:06Z

2

I believe that the problem come from these line

@import "~font-awesome/css/font-awesome.css";
@import "~bootstrap/dist/css/bootstrap.css";

Your prod source code cant find node_modules folder contain these 2 package. So I would suggest you include css in your angular.json something like this

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

answered Aug 6, 2019 at 3:11

Tony

20.3k7 gold badges42 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chameleon Over a year ago

This didn't seem to work for me, I got the same error.

Chameleon · Accepted Answer · 2019-08-21 23:46:44Z

0

So what was happening is that angular seemed to be caching something, I had to delete font awesome from node_modules and from the package.json, and move my files to a different folder in order to fix this issue. I'm sure there is a better way around this, but that is what I did in order to fix the issue.

answered Aug 21, 2019 at 23:46

Chameleon

1291 silver badge15 bronze badges

Collectives™ on Stack Overflow

Getting an error in multi ./src/styles.scss when I try to deploy my angular app to heroku

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related