Include css/style loaders in webpack react application

Question

I want to include custom css file in my react application. My webpack.config.js file looks like below:

var path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public')
  },
  watch: true,
  module:{
    loaders: [
      {
        test:/\.js$/,
        exclude:/node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-1']
        }
      },
      {
           test: /\.less$/,
           loader: 'style!css!less'
       }
    ]
  }
}

The component which uses the style.css file is as below:

import React, { Component } from 'react';
import { Row, Col, Grid, Button } from 'react-bootstrap';
import styles from '../style.css';

    const ProductList = ({ products }) => (
      <Row>
        <Col xs={12} md={4}>
        {
          products.map((product, index) => {
            return(
              <div key={index} className={styles.test}>
                <img src={product.url} />
                <div className="caption">
                  {product.title}
                </div>
                <Button bsStyle="primary">Add to Cart</Button>
              </div>
            )
          })
        }
        </Col>
      </Row>
    )

    export default ProductList;

After importing style.css file and using the class it throws the following error:

ERROR in ./src/style.css
Module parse failed: E:\projects\simple-shopping-cart\src\style.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .test {
|   background-color: blue;
|   background: blue;
 @ ./src/components/product-list.js 13:13-36
 @ ./src/components/index.js
 @ ./src/containers/Products.js
 @ ./src/index.js

Could anyone let me know the correct way of importing css files in react ?

Thanks

Answer 1

Try this instead:

{
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
}

The "-loader" is now mandatory