Why is my scss not used on the deployed website although it is used locally?

[durraniu]

Description

I have my quarto blog on github. In the locally rendered blog, the hero image shows up and I can see it in the _site folder along with the scss. My styles.scss file specifies the hero image. But on the rendered website on netlify, I do not see the css applied. What am I doing wrong?

[mcanouil]

Because debugging a whole non default website is time consuming:

1. Upgrade to Quarto 1.6 release candidate, you'll see a lot of enhancement on how SCSS is handled on websites: https://quarto.org/docs/download/
2. Delete .quarto, _site, and _freeze.
3. render/publish again.

If this does not solve the issue, please try to come up with a simpler version, for example based on quarto create project website.

Note that the content of _site is exactly the same as the one you've published.
I can't see any differences.

_site	Netlify

[mcanouil]

That is very confusing and misleading. You were talking about issue with your SCSS not being applied but now you are talking about a missing resource.

See Carlos' comment.

[durraniu]

Sorry, my intention was not to mislead. I followed the steps you suggested and shared the results of those steps.
Please ignore the comment on _freeze.

[mcanouil]

I meant, your issue is the missing image that you defined in your SCSS, right?

[durraniu]

Yes, the image was not being copied.

[mcanouil]

Then the issue is exactly the same locally and on Netlify. As showed before, there are no differences.

Try adding explicitly the resource as showed in Carlos' comment.

[cscheid]

My styles.scss file specifies the hero image

It's likely that something with our resource discovery code is not going as expected. A simple solution is to explicitly add the file to your resources list:

website:
  resources:
    - filename1
    - filename2 # etc

[durraniu]

Netlify generally refreshes the site quickly after a push to github. But just to test if that was the problem, I did another deployment on netlify and got the same result. It seems that netlify somehow fails to recognize the scss file. I'll check scss file to see if something is wrong. Thanks for all the help.

[durraniu]

Quick update: Since I was not using any scss specific syntax, I renamed the file to styles.css and referenced that in the yml file. Now netlify recognized it and the image shows up.
My understanding was that quarto generates a css file from scss but I was wrong.

[mcanouil]

My website uses SCSS and is deployed on Netlify without any issues so unlikely to be the source of your issue.

[mcanouil]

Now, I understand css is for CSS not SCSS, so you can't put:

css: styles.scss

SCSS requires compilation, CSS does not.

See https://quarto.org/docs/output-formats/html-themes.html

Note that the image is present in your _site so resource discovery seems to work.

[durraniu]

Thanks! And yes, the image was copied to _site after I explicitly specified that in the resources in yaml file. In the hindsight, the image may have been copied if I had correctly specified CSS/SCSS.