0

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

Ashy Ashcsi
  • 1,529
  • 7
  • 22
  • 54
  • 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 Jun 26 '17 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 Jun 26 '17 at 16:31
  • :-\ ok well if you don't want to provide additional info then I'm sorry I can't help you. – rossipedia Jun 26 '17 at 16:32

1 Answers1

1

Try this instead: 

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

The "-loader" is now mandatory

Moe
  • 3,467
  • 1
  • 19
  • 25