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

Question

我正在使用 webpack 使用 react js 和 jsx 和 css，当我将图像添加到 css 时，我的代码无法编译。我不断收到错误"无法解析网址加载器"。 当我从页脚 css 中删除 bg 图像时，我没有收到任何错误。我的代码如下：

footer.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

你能尝试使用文件加载器而不是网址加载器吗？ 文件加载模块的示例规则。

请将文件加载程序安装为本地依赖项。

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