Webpack - 无法解析背景图片的路径

Question

我正在尝试使用React.js和Redux开发Web应用程序，但是遇到了一些问题。

我有以下Webpack配置：

const path = require('path');

var sassParams = [
    'includePaths[]=' + path.resolve(__dirname, './app/styles'),
    'includePaths[]=' + path.resolve(__dirname, '../node_modules')
];

module.exports = {
    devtool: 'inline-source-map',
    entry: {
        javascript: "./app/src/index.jsx",
        html: "./app/index.html",
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'app')
    },
    resolve: {
        extensions: ['', '.js', '.jsx', '.json'],
        root: path.resolve(__dirname, './app/src'),
        alias: {
            images: path.resolve(__dirname, './app/images')
        }
    },
    devServer:{
        contentBase: 'app'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loaders: ["babel-loader"],
        }, {
            test: /\.html$/,
            loader: "file?name=[name].[ext]",
        }, {
            test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
            loader: 'url-loader?limit=10000&name=images/[name].[ext]'
        }, {
            test: /\.scss$/,
            loader: [
                'style-loader',
                'css-loader?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]',
                'resolve-url',
                'postcss-loader',
                'sass-loader?' + sassParams.join('&')
            ].join('!'),
        }],
        postcss() {
            return [autoprefixer, precss];
        },
    },
};

这是我的文件夹结构：

├── app
│   ├── images
│   │   └── image.png
│   ├── index.html
│   ├── src
│   │   ├── actions
│   │   ├── components
│   │   │   └── Button
│   │   │   │   ├── Button.jsx
│   │   │   │   └── Button.scss
│   │   ├── constants
│   │   ├── containers
│   │   ├── index.jsx
│   │   ├── middleware
│   │   ├── reducers
│   │   └── store
│   └── styles
│       ├── _base.scss
│       ├── _functions.scss
│       ├── _mixins.scss
│       ├── _toolkit.scss
│       ├── _variables.scss
│       └── app.scss
├── node_modules
├── package.json
└── webpack.config.js

Button.jsx:

return (
    <button className={style.btn} >
        { children }
    </button>
);

Button.scss:

.btn {
    background-image: url(/images/image.png);
}

我可以从我的web浏览器访问这张图片：http://localhost:8080/images/image.png，但我不明白为什么我的CSS没有起作用... 有什么想法吗？谢谢！更新：检查器中的样式：

.Button__btn___1lpoP {
    background-image: url(/images/image.png);
}

- vermotr

---

请问你能在检查器 (F12) 中粘贴一下 .btn 的样式吗？经过 Webpack 转译后，URL 可能会发生变化。 - Gerard Abello

我认为URL应该是../../../images/image.png，因为它是相对于文件而不是根目录的。 - Shubham Khatri

@ShubhamKhatri：我已经将我的URL更改为../../../images/image.png，并且它可以工作。谢谢！ - vermotr

Answer 1

你需要提供的URL是相对于你的文件的，所以将其更改为../../../images/image.png。

- Shubham Khatri