How to import CSS file on Isomorphic React - Webpack

Question

I'm trying to create an isomorphic react app using express, react, and webpack.

Everything works fine until I import a css file in one of my components. I understand node can not handle this import, but can someone explain how this package on github allows their components to have a css import line?

https://github.com/kriasoft/react-starter-kit

I would like to make my project similar to that. Do they have a line anywhere that has the server ignore that line when rendering components?

This is the error I get

SyntaxError: /home/USER/Code/shared/general/ru/src/components/MainPage/MainPage.scss: Unexpected token (1:1)
> 1 | @import '../variables.scss';
    |  ^
  2 | 
  3 | .MainPage {
  4 |   background-color: $primary-color;
    at Parser.pp.raise (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.parseExprAtom (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:425:12)
    at Parser.parseExprAtom (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/plugins/jsx/index.js:412:22)
    at Parser.pp.parseExprSubscripts (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:236:19)
    at Parser.pp.parseMaybeUnary (/home/USER/Code/shared/general/ru/node_modules/babylon/lib/parser/expression.js:217:19)

score 3 · Answer 1 · edited May 23 '17 at 10:34

You need yet another loader to make css/style loaders to work.

https://www.npmjs.com/package/webpack-isomorphic-tools

But Webpack is made for client side code development only: it finds all require() calls inside your code and replaces them with various kinds of magic to make the things work. If you try to run the same source code outside of Webpack - for example, on a Node.js server - you'll get a ton of SyntaxErrors with Unexpected tokens. That's because on a Node.js server there's no Webpack require() magic happening and it simply tries to require() all the "assets" (styles, images, fonts, OpenGL shaders, etc) as if they were proper javascript-coded modules hence the error message.

Good luck!

Edit:

I think you also want to see this SO question. Importing CSS files in Isomorphic React Components

Webpack isomorphic tools is no longer maintained as should migrate to https://github.com/catamphetamine/webpack-isomorphic-tools — digz6666, Apr 29 '19 at 04:33

score 2 · Answer 2 · answered Jan 08 '16 at 23:08

2

The project that the OP mentioned is using this: https://github.com/kriasoft/isomorphic-style-loader

So yes, another loader + an interface to insert and use the styles.

answered Jan 08 '16 at 23:08

Ian Walter

882
2
8
23

Yes it does use that, but why does namenamesoseji get this error? `isomorphic-style-loader` should be able to work on the server side as well as the client side. It seems his code is not yet transpilled, but how can he get it transpilled on the server side? – SudoPlz Aug 11 '16 at 23:23

score -2 · Answer 3 · answered Dec 05 '15 at 18:39

Maybe you doesn't use the sass loader in tour webpack configuration.

Try install this loader: Sass loader

Example of webpack config:

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }
    ]
  }
  sassLoader: {
    includePaths: [path.resolve(__dirname, "./some-folder")]
  }
};

I can suggest also you to use postcss to apply autoprefixer!

How to import CSS file on Isomorphic React - Webpack

3 Answers3

Linked