SCSS issues while deploying Astro Site

Support
,
1

Hi

My netlify site name in alimbolar.netlify.app

And it’s the first time I am deploying an astro site on netlify and frankly I expected it to be real smooth. The process was smooth… but for some reason, I am not able to get all the CSS on the deployed site. It works fine on localhost and although it’s still a Work In Progress I thought I’d deploy and check it.

And there’s something that’s not right about the SCSS loading up I think but I can’t seem to figure out why… I have the default Layout.astro that the default Asto install provides and I’ve added these lines within style tags

<style lang="scss">
  @import "../css/styles.scss";
  @import "https://unpkg.com/open-props";
</style>

On the localhost it looks like the screenshot shared…

Screenshot from 2022-11-24 12-28-52
Screenshot from 2022-11-24 12-28-521439×845 50.7 KB

while on the site it’s all garbled… Here’s the link to the github repo…

https://github.com/alimbolar/personal-website-on-astro

Please do advise what I am doing wrong.

Regards,
Alim

2

Just in case someone else does the same mistake I did, here’s how I resolved the issues.

The ‘importing of scss’ has to be done in the frontmatter portion of the .astro file and not in the tags…

Not 100% sure if this is the right thing to do … but it worked for me…

Regards,
Alim

3

Hey there, @alimbolar :wave:

Thanks so much for coming back and sharing your solution! It will definitely help folks who find themselves in a similar position, so we appreciate it.

1 Like