handling css/scss/etc in imported components

[omidantilong]

• mdx-bundler version: 9.0.0
• node version: 17
• npm version:8.1

Hi! Thanks for this great project. I've been wrestling MDX for a couple of days and arrived on this plugin earlier. It seems to do basically everything I want, but I can't figure out how to import components that import styles.

There's two things I'm encountering:

• For plain old non-module css, eg from a dist directory in an external component, I can set write to true and see files appearing like _mdx_bundler_entry_point-1176be25-98cc-4b47-b7b4-d23e6e10f8f9.css which has the correct styles, but they never get included. How can I get a reference to those?
• (FIXED) For scss (in this case scss modules), esbuild errors with the "No loader is configured for ".scss" files" error. I've tried installing the necessary esbuild-sass-plugin but i'm not sure if it's possible to pass plugins/loaders into the esbuildOptions object this way? It doesn't seem to like it.

Here's the bare bones of what I'm trying to do with standard css.

# Dummy.jsx

import 'style.css' <-- plain old css

export const Dummy = () => {
return 'hello world';
}

# page.mdx

import Dummy from 'components/Dummy'

<Dummy /> <-- renders fine, but unstyled

I saw there was a similar issue but that appeared to be about css modules specifically.

Thanks! ❤️

EDIT: Yay, I've managed to get esbuild-sass-plugin to work -- but I'm now experiencing the same issue where the component renders but the styles are not included on the page 🤔

[spcbfr]

Hey @omidantilong this is unrelated but can I ask you where the components directory your importing from is in reference to the mdx folder ?