How to add CSS configuration in reactjs Project?

Question

I've written the webpackconfig but css doesn't seem to work properly and it is throwing and error. Following are my file's contains.

My webpack.config.js:

module: {
    loaders: [
      {
        test: /\.js?/,
        include: SRC_DIR,
        loader: "babel-loader",
        query: {
          presets: ["react", "es2015", "stage-2"]
        }
      }
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader")
      }
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css", {
      allChunks: true
    })
  ]
};

and in my Index.js I've added as :

import '../assets/css/style.css';

Package.json :

{
  ...
  "dependencies": {...
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3",
    "css-loader": "^0.28.7",
    "style-loader": "^0.19.0"
  }
}

Answer 1

As per our chat, this is what your webpack.config.js file is as below:

var path = require("path"); 

var DIST_DIR = path.resolve(__dirname, "dist"); 
var SRC_DIR = path.resolve(__dirname, "src"); 

var config = { 
  entry: SRC_DIR + "/app/index.js", 
  output: { 
    path: DIST_DIR + "/app", 
    filename: "bundle.js", 
    publicPath: "/app/" 
  }, 
  module: { 
    loaders: [ 
      { 
        test: /\.js?/, 
        include: SRC_DIR, 
        loader: "babel-loader", 
        query: { 
          presets: ["react", "es2015", "stage-2"] 
        }
      } 
      { 
        test: /\.css$/, 
        loaders: ["style-loader", "css-loader", "sass-loader"] 
      } 
      { 
        test: /\.less$/, 
        loader: ExtractTextPlugin.extract("css-loader!sass-loader") 
      } 
    ] 
  }, 
  plugins: [ 
    new ExtractTextPlugin("src/components/assets/css/style.css", { 
      allChunks: true 
    }) 
  ] 
}; 

module.exports = config;

There are two issues with this config.

1. The are no commas separating the loaders objects.
2. You are using ExtractTextPlugin but have not imported/required it anywhere in the config.

Issue #1 is quite obvious how to solve; simply add the commas after each definition of a loader object.

Issue #2 as well, you need to install and reference ExtractTextPlugin in you webpack config file.

You can do so by running the following command in your terminal:

npm install --save-dev extract-text-webpack-plugin

This will install the plugin to your node_modules and also list it in your package.json file under thedevDependencies` object.

And then in your webpack.config.js where you are requiring modules, also require the plugin like so:

const ExtractTextPlugin = require("extract-text-webpack-plugin");

After making these changes, you config file should look something like this:

var path = require("path"); 
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var DIST_DIR = path.resolve(__dirname, "dist"); 
var SRC_DIR = path.resolve(__dirname, "src"); 

var config = { 
  entry: SRC_DIR + "/app/index.js", 
  output: { 
    path: DIST_DIR + "/app", 
    filename: "bundle.js", 
    publicPath: "/app/" 
  }, 
  module: { 
    loaders: [ 
      { 
        test: /\.js?/, 
        include: SRC_DIR, 
        loader: "babel-loader", 
        query: { 
          presets: ["react", "es2015", "stage-2"] 
        }
      },
      { 
        test: /\.css$/, 
        loaders: ["style-loader", "css-loader", "sass-loader"] 
      },
      { 
        test: /\.less$/, 
        loader: ExtractTextPlugin.extract("css-loader!sass-loader") 
      } 
    ] 
  }, 
  plugins: [ 
    new ExtractTextPlugin("src/components/assets/css/style.css", { 
      allChunks: true 
    }) 
  ] 
}; 

module.exports = config;