How to load css in react app?

I created a react app using create-react-app and everything works fine except that I can’t figure out how to load css/stylus files.

In my previous react project that wasn’t created using create-react-app I used webpack.config but now I don’t know where to include this file and how to use it.

This is my folder structure:

.  
+--client  
|  +--node_modules
|  +--public
|  +--src
|  +--package.json
+--server
|  +--node_modules
|  +--src
|  +--.babelrc
|  +--package.json

This is my previous webpack.config.dev.js file:

import path from 'path';
import webpack from 'webpack';

export default {
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, '/client/index.js')
  ],
  output: {
    filename: 'bundle.js',
    path: '/',
    publicPath: '/'
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: //.js$/,
        include: path.join(__dirname, 'client'),
        loader: 'babel-loader',
      },
      {
        test: //.styl$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'stylus-loader',
          },
        ],
      },
      {
        test: //.css?$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [ '.js', '.styl' ]
  }
}

Please let me know if I need to provide additional information.

There is detailed informations about how to add SCSS and Less files to create-react-app project on their documentation. You can check here for more detail.

You can add basic CSS styling with just importing the file like shown below;

import '/css/main.css';

Or you can add as classNames

const styles = {
   header: {
     fontSize: 18,
     color: '#909090',
   }
 };

 export default class Header extends React.Component {
   render() {
     return (
       <h1 className={styles.header}>This is a header</h1>
     );
   }
 }

One of the approaches involves loading CSS files (via css-loader) from your JS files, for a Text.jsx

import React from 'react';
import './screen.css'; // if screen.css is located next to Text.jsx

class Text extends React.Component {
  // ...
}

export default Text;

You could also generate an output CSS, using e.g. ExtractTextPlugin (see Webpack2 loading and extracting LESS file)