import CSS/fonts

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 ❤️

[albinotonnina]

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

--no-html during build solved my problem.

[with-heart]

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'}],
      },
    ],
  },
}