在 webpack React 应用程序中包含 css/style 个加载器

Question

我想在我的 React 应用程序中包含自定义 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 文件并使用 class 后，它抛出以下错误：

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

谁能告诉我在 React 中导入 css 文件的正确方法？

谢谢

Answer 1

试试这个：

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

“-loader”现在是强制性的

在 webpack React 应用程序中包含 css/style 个加载器

Include css/style loaders in webpack react application

css

reactjs

webpack

webpack-style-loader