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)

Community · Accepted Answer · 2017-05-23 10:34:05Z

3

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

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Dec 5, 2015 at 15:29

Shouichi

1,1501 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

digz6666 Over a year ago

Webpack isomorphic tools is no longer maintained as should migrate to github.com/catamphetamine/webpack-isomorphic-tools

Ian Walter · Accepted Answer · 2016-01-08 23:08:06Z

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 8, 2016 at 23:08

Ian Walter

9022 gold badges8 silver badges24 bronze badges

1 Comment

SudoPlz Over a year ago

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?

Luca Colonnello · Accepted Answer · 2015-12-05 18:39:49Z

-2

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!

answered Dec 5, 2015 at 18:39

Luca Colonnello

1,45612 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to import CSS file on Isomorphic React - Webpack

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related