CSS styles in dev but not in production build | Astro Lounge | Page 1

Hey all. Hoping someone can point me in the right direction. All's well in dev mode but when I build for production there's no references to my CSS. I'm using MDX as below.

MDX content e.g. src/content/articles/my-article.mdx

---
layout: "../../layouts/article-layout-bulma.astro"
title: "My title"
---

My content.

Astro layout e.g. src/layouts/article-layout-bulma.astro

---
import "../styles/bulma.scss";
const { frontmatter } = Astro.props;
---

<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>{frontmatter.title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body class="bulma-columns bulma-container bulma-is-max-desktop">
    <article class="bulma-column bulma-content">
      <div class="">
        <h1>{frontmatter.title}</h1>
        <slot />
      </div>
    </article>
  </body>
</html>

Astro page e.g. src/pages/articles/[...slug].astro

---
import { getCollection } from "astro:content";
// 1. Generate a new path for every collection entry
export async function getStaticPaths() {
  const blogEntries = await getCollection("articles");
  return blogEntries.map((entry) => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}
// 2. For your template, you can get the entry directly from the prop
const { entry } = Astro.props;
const { Content } = await entry.render();
---

<Content />

SCSS Style e.g. src/styles/bulma.scss

@use "../node_modules/bulma/sass/utilities/initial-variables" with (
  $class-prefix: "bulma-"
);
@use "../node_modules/bulma/sass/themes";
@use "../node_modules/bulma/sass/base";
@use "../node_modules/bulma/sass/elements/content";
@use "../node_modules/bulma/sass/grid/columns";
@use "../node_modules/bulma/sass/layout";

Note I think think this is specific to me using MDX with entry.render()

#CSS styles in dev but not in production build