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

Can you show the code that's importing the css file? That seems to be missing and would be a huge help to diagnosing this. — rossipedia
– rossipedia, Commented Jun 26, 2017 at 15:18
I am importing it in a very simple way. import styles from '../style.css'; and using it like below: className={styles.test} — Ashy Ashcsi
– Ashy Ashcsi, Commented Jun 26, 2017 at 16:31
:-\ ok well if you don't want to provide additional info then I'm sorry I can't help you. — rossipedia
– rossipedia, Commented Jun 26, 2017 at 16:32

Moe · Accepted Answer · 2017-06-26 15:36:14Z

1

Try this instead:

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

The "-loader" is now mandatory

answered Jun 26, 2017 at 15:36

Moe

3,7631 gold badge22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ashy Ashcsi Over a year ago

Thanks Mohamed.. that worked..just replace .less with .css.

Collectives™ on Stack Overflow

Include css/style loaders in webpack react application

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related