scss style not showing in deployment | Angular Community | Page 1

agile shuttle May 13, 2023, 7:22 AM

#

hi guys, I'm trying to deploy my angular app on an nginx server, problem is, when i do ng build command the resulting website does not have any style applied.

The strange thing is that if i try to deploy the app using ng deploy and choose firebase as the hosting everything looks fine and style it's being applied successfully

In my angular app i'm using SCSS and tailwind to style components.

I don't actually know what to show to help you answer the question, if you ask me for some material i will provide it

orchid trellis May 13, 2023, 7:30 AM

#

What's the URL of page that works fine (so that we can have a look), and of the page that doesn't (so that we can have a look)?

agile shuttle May 13, 2023, 7:31 AM

#

the one looking fine: https://myforum-a6632.web.app

#

i only have the ip address of the one looking not so fine, i'm not sure if it's safe to share it here

orchid trellis May 13, 2023, 7:33 AM

#

Why wouldn't it be? If you had a URL, do you really think we couldn't find out the associated IP address?

agile shuttle May 13, 2023, 7:33 AM

#

fair enough 207.154.202.138

orchid trellis May 13, 2023, 7:43 AM

#

That's not the same app being deployed. And the non-working one has an additional <link rel="stylesheet" href="./styles.e4f3ab990e1884a4.css"> in its index.html, that should most probably not be there.

agile shuttle May 13, 2023, 7:44 AM

#

i added it manually just to see if it works

#

what to you mean is not the same app?

broken furnace May 13, 2023, 7:45 AM

#

Base href set properly in index.html?

agile shuttle May 13, 2023, 7:46 AM

#

all you see it's being fenerated by ng build except the link line we discussed early

orchid trellis May 13, 2023, 7:50 AM

#

Well, remove it. And deploy the exact same thing on the two. Currently, one uses styles.dbf135298605b698.css whereas the other uses styles.e4f3ab990e1884a4.css for example (and the js file names are different too. So, in order to have a meaningful comparison, deploy the exact same files on both.

agile shuttle May 13, 2023, 7:52 AM

#

i see, i think they differ because the one that works is deployed on my local machine using ng deploy and choosing firebase hosting, the one that doesn't work is deployed on a remote server using ng build

#

building both of them using ng deploy firebase will not reproduce the problem and will host the whole thing on firebase, which is the thing i don't need to do

#scss style not showing in deployment