import `.scss` inside of MDX Layout | Astro Lounge | Page 1

mild owl Oct 5, 2022, 6:56 AM

#

I have an mdx file with the following frontmatter:

---
{
  title: "The Framework Field Guide",
  associatedSeries: "Framework Field Guide",
  description: "A practical and free way to teach Angular, React, and Vue all at once, so you can choose the right tool for the job and learn the underlying concepts in depth.",
  authors: ["crutchcorn"],
  coverImg: "./cover.png",
  socialImg: "/framework_field_guide_social.png",
  type: "book",
  published: "2023-01-01T13:45:00.284Z",
  layout: "../../../layouts/collections-mdx.astro",
}
---

Inside of layout, I have the following code:

---
import "../page-components/collections/collections.scss";
import "../styles/post-body.scss";
import "../styles/shiki.scss";
import "../styles/convertkit.scss";
import Document from "./document.astro";
---

<Document>
    <slot />
</Document>

And while Document's scss import seems to load just fine, ../page-components/collections/collections.scss doesn't seem to apply at all.

Why is that? How can I fix that?

dusky belfry Oct 5, 2022, 10:56 AM

#

What if you change the order of your imports? It could be that since imports are ordered that whatever is below your stylesheet is overwriting it, do the styles show up in devtools?

mild owl Oct 5, 2022, 8:43 PM

#

Order of imports don't fix the problem. Further, the stylesheets don't show up at all in devtools, it's like they're not being applied at all

mild owl Oct 7, 2022, 12:55 AM

#

Nevermind, this was a bug on my end

#import `.scss` inside of MDX Layout