Open jimjam-slam opened 1 month ago
I wonder if what you are encountering is related to this known issue:
In short, all HTML pages in a website are currently unfortunately using the same bootstrap.min.scss
. In your example, you'll see all the pages are using https://qmd-lab.github.io/closeread/site_libs/bootstrap/bootstrap.min.css
. Same file for your pages in the website using default them, and the ones in gallery/demos
that are expected to use a different one.
This means currently a website can't use distinct theme options for different pages or part of the website. This is because the last page that renders will have its theme configuration merge with Bootstrap using SASS to build a css for the site.
it seems that grid.scss is not present in the bundled bootstrap.min.css (we can't find any of the classes we've defined, for example)
Considering this known issue, I am not surprise seeing that index.qmd
is the last document build in your example. It would be the default cosmo
for html format you set in _quarto.yml
will create the bootstrap.min.css
When we render this locally, however (both using the latest Quarto pre-release and Quarto 1.4.549), they seem to be present in bootstrap.min.css
Same considering the known issue, it could depend locally on how the side is built, and the order of the build. If you quarto preview
on file of the gallery/demos
it would have your theme and replace the previous bootstrap.min.css
. Same if quarto render
does end up by rendering one of the file with your theme. Though locally I would not expect that it works, as one of docs/gallery/demos/sticky-block-types/index.html
and docs/gallery/demos/a-poem-about-suffering/index.html
should not have its expected theme.
Anyhow, I am sure that locally you could confirm this is the same problem by looking at bootstrap.min.css
depending on what you render and how.
This is really impactful and we need to fix this for sure. This is just not an easy change as it should be designed carefully; The discussion there as some ideas for resolution https://github.com/quarto-dev/quarto-cli/issues/10087#issuecomment-2183026202
@cscheid 1.6 is quite full already, but this issue keeps hitting us regularly... We should really consider this, especially that with _brand.yml
feature for website, this will be a bad experience when a user will be trying to override on a single page something. 🤔
Oh, interesting! If the page render order is different when we render locally, then as you say, that might explain why we see the different results there... will confirm when I can!
In the mean time, if this is the issue, that gives @andrewpbray and I two ways we can proceed:
Rewrite the additional styles as CSS rather than SCSS. We'd hoped to use SCSS variables, but we might be able to work around this!
yes that is a workaround. Depending or your use case, there could be scenario where you defined your variable in your main SASS theme as CSS variable, and then use that in your custom CSS. Quarto also may set some variable as CSS variables like https://github.com/quarto-dev/quarto-cli/blob/ff56839c621fc1fbac2997a38550d4d4f5a939d6/src/resources/formats/html/_quarto-rules.scss#L584-L591 or https://github.com/quarto-dev/quarto-cli/blob/ff56839c621fc1fbac2997a38550d4d4f5a939d6/src/resources/formats/html/_quarto-rules.scss#L721-L733
Though we don't that for everything, and your case can be quite specific. Just mentioning in case somehow in can help right now for a workaround
Thanks @cderv! 😊
@cderv yes I'm planning on fixing this for 1.6.
Bug description
@andrewpbray and I are developing a Quarto extension, and we've deployed a documentation website that uses it. We're using a strategy where a pre-render script copies the extension from the repo root into
/docs
(where the site lives).Among other things, the extension contributes a format that includes an SCSS stylesheet. We want this stylesheet to play nice with whatever theme a user provides, so in the extension we have:
Then, our website's
_quarto.yml
has the following, so that the pages where we aren't demoing the extension don't include these styles:Finally, in
/docs/gallery/demos
we have a_metadata.yml
:For good measure, on the individual posts inside
/docs/gallery/demos
we've thrown in:format.closeread-html.debug-mode
is an option we've added (a Lua filter handles that successfully).In
sticky-block-types/index.qmd
(first post), we just wantgrid.scss
to merge withcosmo
. In the second, we wantgrid.scss
to merge in withnytimes.scss
(which is alongside the .qmd, not in the extension folder), notcosmos
.When we push to GitHub Pages using a GHA (which is using Quarto 1.4.549), it seems that
grid.scss
is not present in the bundledbootstrap.min.css
(we can't find any of the classes we've defined, for example), and those styles don't seem to take effect.When we render this locally, however (both using the latest Quarto pre-release and Quarto 1.4.549), they seem to be present in
bootstrap.min.css
and work fine:https://github.com/user-attachments/assets/da3d0cdc-307c-42f8-820b-508eaf8ac973
We're not too sure if:
Steps to reproduce
No response
Expected behavior
No response
Actual behavior
No response
Your environment
No response
Quarto check output
Locally: