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"
  }
}

What is the error saying? Also, may you please upload you `package.json` — Siya Mzam, Dec 05 '17 at 07:10
Unexpected token (1:0) You may need an appropriate loader to handle this file type. | .title{ | margin-bottom: 30px; | } @ ./src/app/index.js 16:0-34 — Riya Kapuria, Dec 05 '17 at 07:13
Try this `loaders: ["style-loader", "css-loader", "sass-loader"]` and `ExtractTextPlugin.extract("css-loader!sass-loader")` — Siya Mzam, Dec 05 '17 at 07:15
{ test: /\.css$/, loaders: ["style-loader", "css-loader", "sass-loader"] } { test: /\.less$/, loader: ExtractTextPlugin.extract("css-loader!sass-loader") }' — Riya Kapuria, Dec 05 '17 at 07:17
What error are you getting now? Please upload your package.json — Siya Mzam, Dec 05 '17 at 07:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160483/discussion-between-riya-kapuria-and-brandnew). — Riya Kapuria, Dec 05 '17 at 07:22

Siya Mzam · Answer 1 · 2017-12-05T10:56:02.273

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.

The are no commas separating the loaders objects.
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;

How to add CSS configuration in reactjs Project?

1 Answers1