Cannot import CSS into html component when serving site as Node.js doesn't understand Webpack module types

[esauter5]

First, I apologize if this is due to my own ignorance and not knowing enough about how webpack works, but I cannot seem to load any css files.

In html.jsx I have:

import './css/style.css';

Whenever I run gatsby serve, I get an "Illegal token error" on the css file. I've also seen "Unexpected reserved word" errors where javascript reserved words are used in the CSS (like @import). It doesn't appear that it is recognizing it as a css file, but the webpack loaders look good and I've seen the same thing done in gatsby examples.

Am I missing something obvious here?

[patrykkopycinski]

hi @esauter5 try to require css files instead of importing it, i mean:
require('../css/styles.css');

[esauter5]

Forgot to mention I had tried that and the same error results so it doesnt seem to be a problem with the import syntax

[KyleAMathews]

This is a non-obvious shortcoming with Gatsby right now that your html file gets loaded in Node not Webpack context which means requiring modules that require Webpack fail.

I experimented with https://github.com/petehunt/webpack-require in the past to solve this but ran into this problem. I haven't tried it recently so it could be working now. @esauter5 if you'd like to experiment with adding webpack-require support into serve.js that'd be a nice fix. I've run into this same problem and had to do weird workarounds.

[esauter5]

Thanks for the direction @KyleAMathews. I'll play around and see if I can get a PR to submit

[KyleAMathews]

👍🏻
On Tue, Nov 10, 2015 at 6:12 PM Eric Sauter notifications@github.com
wrote:

Thanks for the direction @KyleAMathews https://github.com/KyleAMathews.
I'll play around and see if I can get a PR to submit

—
Reply to this email directly or view it on GitHub
#83 (comment).

[KyleAMathews]

@esauter5 pushed fix for this using webpack-require. Will be publishing new release soon. Thanks for your patience!

[esauter5]

Awesome thanks, @KyleAMathews! Sorry I didn't find time to get around to it myself. I worked around it by requiring the css in a different file and then got sidetracked from the project for a bit.

[KyleAMathews]

@esauter5 no worries, I ended up having to do it as part of a bunch of interrelated changes I was making yesterday. Looking forward to other contributions from you ;-)

[esauter5]

@KyleAMathews Slowly making my way through the code, so I'll eventually start pushing :)

Probably will get in touch with you this week on Reactiflux about some best practices and stuff. Could use some of your Gatsby knowledge.

[KyleAMathews]

👍 feel free. I'm on Discord most of the time.