How can you import an arbitrary file and show its text contents?

[andyford]

I'd like to display the text contents of a .scss file in an MDX file but can't seem to get it working.

I tried

import GlobalCSS from '../src/style/_globals.scss';

<GlobalCSS />

or

<div>{GlobalCSS}</div>

but neither worked.

is this supported? maybe I need to add or remove a loader?

[wooorm]

MDX compiles to JavaScript.
That JavaScript runs somewhere.
In your browser, when code runs, you can use fetch to load files.
In Node.js, when code runs, you can use fs to load files.

[ChristianMurphy]

@andyford it sounds like you are using webpack with @mdx-js/loader to run MDX?
If so, it can be done by configuring webpack loaders.
As @wooorm notes, MDX compiles to JS, things should be able to be imported in the same way that things can from a plain JS file.

For example, here is how CSS Modules can be included with Next+Webpack https://codesandbox.io/s/example-with-css-module-639yym?file=/pages/index.mdx

The specifics of how to configure webpack to load file in the precise way you want may be something the webpack community may be able to help more in depth (https://github.com/webpack/webpack/discussions and/or https://stackoverflow.com/questions/tagged/webpack)

[andyford]

I had more moving parts coming into play here than I first thought. Thanks for the hints @wooorm and @ChristianMurphy even though I left out a lot of detail.

First, this is within a Storybook project (although I don't know if that part matters much). Second, this project is already using (s)css modules (I think this turned out to be an important factor).

When I was trying to include .scss files (even .scss files that did not end in .module.scss), our loaders for css modules were only looking for *.scss files so the file contents came back as undefined.

Here's what ended up working in my situation

Added a rule to load any file with ?raw query param as an "Asset Module"

config.module.rules.unshift({
  resourceQuery: /raw/,
  type: 'asset/source',
});

...and then doing raw imports like:

import rawText from '../src/style/_vars.scss?raw';

… with that, I finally started getting raw text BUT it appeared to be the raw text after css modules had already transformed it (it wasn’t the original file contents)

so to get around that, I explicitly opted out of my “normal” css loaders when the “raw” query was present:

test: /\.scss$/,
resourceQuery: { not: [/raw/] },
use: [...]

with this webpack config, I'm now able to include arbitrary raw files 🎉

hat tip to @dcousineau who was a major help in guiding me to this solution

[phil-lgr]

Thanks! This is new in webpack v5 I believe, to save other the time to find quickly, here is the exact example in the webpack docs: https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax