Importing CSS files in Isomorphic React Components

Question

I have a React application with Components written in ES6 - transpiled via Babel and Webpack.

In some places I would like to include specific CSS files with specific

Answer 1

You can't require css in the component that you are rendering on the server. One way to deal with it is to check if it's a browser before requiring css.

if (process.env.BROWSER) {
  require("./style.css");
}

In order to make it possible you should set process.env.BROWSER to false (or delete it) on the server server.js

delete process.env.BROWSER;
...
// other server stuff

and set it to true for the browser. You do it with webpack's DefinePlugin in the config - webpack.config.js

plugins: [
    ...
    new webpack.DefinePlugin({
        "process.env": {
            BROWSER: JSON.stringify(true)
        }
    })
]

You can see this in action in gpbl's Isomorphic500 app.

Answer 2

I've finally realised that this error is not originating at the compile stage, but rather at runtime. Because this is an ismorphic app, the components and any dependencies they have will first be parsed on the server (ie, in node). It is this that is causing the error.

Thanks for all the suggestions, I will post more if/when I figure out how to have per-component stylesheets in an isomorphic application.

Answer 3

Make sure you are using the loaders in your webpack config:

  module: {
     loaders: [
        { test: /\.jsx$/, exclude: /node_modules/, loader: "babel" },
        { test: /\.css$/, loader: "style!css" }
     ]
  }

Answer 4

If you're building an isomorphic app with ES6 and want to include CSS when rendering on the server (important so basic styles can be sent down to the client in the first HTTP response) check out the @withStyles ES7 decorator used in React Starter Kit.

This little beauty helps ensure users see your content with styles when the page is first rendered. Here's an example isomorphic app I'm building leveraging this technique. Just search the codebase for @withStyles to see how it's used. It goes a little something like this:

import React, { Component, PropTypes } from 'react';
import styles from './ScheduleList.css';
import withStyles from '../../decorators/withStyles';

@withStyles(styles)
class ScheduleList extends Component {

Answer 5

Solved With This...

https://github.com/michalkvasnicak/babel-plugin-css-modules-transform

$ npm install --save-dev babel-plugin-css-modules-transform

Include plugin in .babelrc

{
    "plugins": ["css-modules-transform"]
}

And Import Css..... Like This Anywhere You Want

const styles = require('./test.css');
OR
import css from './styles.css'

Also See This... Apart From Css Files........................................................ . https://www.npmjs.com/package/babel-plugin-transform-assets

Answer 6

I used this babel plugin with success to solve a similar issue with less, svg and images. But it should work with any non js assets.

It rewrites all assets imports into variables, so as long as you run the compiled code just on the server and have a bundle built with webpack for the client, it should be fine.

The only drawback is that it onlyworks with named imports, so you'll have to:

import styles from './styles.css';

in order to make it work.