CODEWITHSUNDEEP
node.jsangularecmascript-6sasssingle-page-application
Chameleon
Chameleon

Reputation: 119

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

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'

Upvotes: 4

Views: 2128

Answers (2)

Chameleon
Chameleon

Reputation: 119

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.

Upvotes: 0

Tony
Tony

Reputation: 20132

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"
],

Upvotes: 2

Related Questions