css - 我正在使用 webpack 使用 React js 和 jsx 和 css，当我将图像添加到 css 时，我的代码无法编译

Question

我正在使用 webpack 使用 React js 和 jsx 和 css，当我将图像添加到 css 时，我的代码无法编译。我一直收到错误“无法解析 url 加载程序”。当我从页脚 css 中删除 bg 图像时，我没有收到任何错误。我的代码如下:

页脚.jsx:

import React, { Component } from 'react';
import FooterMenu from './FooterMenu';
import Subscribe from '../../Media/Subscribe';

import './Footer.css';

export default class Footer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentYear: new Date().getFullYear(),
    }
  }
  render() {
    const menuItems = this.props.data.map((menu, index) =>
      <FooterMenu data={menu} key={index}></FooterMenu>
    );
    return (
      <footer>
        <div id="footerOverlay">
        <div className="container-fluid">
          <div class="row">
            <div className="footer-content">
              <div class="footer-left">
                <div className="footer-left__menu">
                  {menuItems}
                </div>
              </div>
              <div class="footer-right">
                <Subscribe></Subscribe>
              </div>
            </div>
          </div>
          <div class="footer-bottom text-center">
            <div class="container">
              <div class="row">
                <div class="col-md-12">
                  <small class="copyright">
                    Copyright &copy; 1996-{this.state.currentYear} U.S. Masters Swimming. All rights reserved.
                </small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </footer>
    );
  }
}

页脚.css:

footer {
  color: white;
  background-color: #6f6f6f; /* need to set image */
  background-image: url('../../../assets/images/bg.png');
}

这是我的 webpack 文件:

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
    context: path.join(__dirname, "src/app"),
    devtool: debug ? "inline-sourcemap" : false,
    entry: {
        fed: "./fed.js",
        client: "./client.js",
        server: "./server.js"
    },
    devServer: {
        contentBase: 'src/App',
        inline: true,
        port: process.env.port || 8080,
        open: true,
        openPage: '',
    },
    module: {
        loaders: [{
                test: /\.json$/,
                loader: 'json'
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-0'],
                    plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
                }
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|ttf|wav|mp4|mp3)/,
                exclude: /(node_modules|bower_components)/,
                loader: 'url-loader'
            },
            {
                test: /\.css/,
                exclude: /(node_modules|bower_components)/,
                use: [{
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    output: {
        path: __dirname + "/src/app/dist",
        filename: "[name].min.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: true,
            compress: {
                warnings: false, // Suppress uglification warnings
                pure_getters: true,
                unsafe: true,
                unsafe_comps: true,
                screw_ie8: true
            },
            output: {
                comments: false,
            },
            exclude: [/\.min\.js$/gi]
        })
    ],
};

在这方面的任何帮助都会有很大帮助

Answer 1

您可以尝试使用 file-loader 而不是 url-loader 吗？ 文件加载器模块的示例规则。

请将 file-loader 安装为本地依赖项。

        {
            test: /\.(eot|woff|woff2|ttf|otf|png|jpg)$/,
            loader: 'file-loader?name=images/[name].[ext]'
        }