How to import CSS file on Isomorphic React - Webpack

问题

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)

回答1:

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

回答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.

回答3:

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!

来源：https://stackoverflow.com/questions/33489192/how-to-import-css-file-on-isomorphic-react-webpack

标签

reactjs

Webpack

babeljs

isomorphic-javascript