Mdx-deck: import CSS/fonts

Created on 22 Sep 2018  路  5Comments  路  Source: jxnblk/mdx-deck

Trying to put together a Gatsby theme for mdx-deck, and running into some issues with loading web fonts.

A few of the fonts we use are available in Google Fonts, so I could go that way, but ideally I'd be able to use the typeface- packages (basically an encapsulation of web fonts including the necessary CSS/woff/etc. files) and then the path to the local webfont to get _all_ the fonts we need (including Futura).

However, when I attempt to configure webpack with the css-loader and style-loader to load the CSS, the build breaks presumably because it's statically rendered and window isn't available.

$ mdx-deck build deck.js --webpack webpack.config.js
[mdx-deck] building
[mdx-deck] rendering static html
webpack:///./node_modules/style-loader/lib/addStyles.js?:23
return window && document && document.all && !window.atob;
^

ReferenceError: window is not defined

Any insight here? This apparently _must have_ worked at some point, because I see Kent C Dodds is using CSS and able to build content out--also note that checking out that project and running the build script exhibits the same issue!

For a reproduction, check out the example here

Thanks for the awesome work here, I love mdx-deck 鉂わ笍

Most helpful comment

Same, has to do with html static rendering (I'm not sure what that does actually)

--no-html during build solved my problem.

All 5 comments

I am also getting this build error with css-loader and style-loader included in my app.

Same, has to do with html static rendering (I'm not sure what that does actually)

--no-html during build solved my problem.

I got this error for Appear tag and --no-html solved

In case anyone else runs into this issue, you can allow css require/import by installing style-loader and css-loader and then creating webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{loader: 'style-loader'}, {loader: 'css-loader'}],
      },
    ],
  },
}

@with-heart that doesn't really seem to be the case. My example repo contained exactly that set-up and the issue persists.

I just upgraded mdx-deck to the latest and still seems to be an issue.

--no-html does indeed still work though--so I'll just close this out! Wish we could get this working at some point!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sibelius picture sibelius  路  3Comments

wpannell picture wpannell  路  4Comments

codepunkt picture codepunkt  路  5Comments

zz1211 picture zz1211  路  7Comments

jxnblk picture jxnblk  路  4Comments