webpack反応アプリケーションにCSS /スタイルローダーを含める

Question

私の反応アプリケーションにカスタムCSSファイルを含めたいと思います。マイwebpack.config.jsファイルは以下のようになります。

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' 
     } 
    ] 
    } 
} 

のstyle.cssファイルを使用するコンポーネントは以下の通りです：

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; 

のstyle.cssファイルをインポートし、それをスローしたクラスを使用した後次のエラーが発生しました：

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 

私は誰でも反応でCSSファイルをインポートする正しい方法を教えてください。

おかげ

Answer 1

これは代わりに試してみてください：

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

"-loader" は今必須です