无法解析相对 URL

Question

当我在 SCSS 文件中使用相对 url 时（我试图将 background-image 属性设置为本地文件），我收到以下错误：

知道怎么回事吗？

我有一个具有以下结构的项目：

public/
    dist/
    images/
        wave.png
    index.html
src/
    components/
        MyComponent.js
    app.js
styles/
    base/
    components/
        _my-component.scss
    styles.scss
webpack.config.js

在MyComponent.js中我渲染<div className="bg"></div>。

在 _my-component.scss 我有：

.bg {
    background-image: url("/images/wave.png");
}

在 webpack.config.js 我有：

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env) => {
    const isProduction = env === "production";

    return {
        entry: ["./src/app.js"],
        output: {
            path: path.join(__dirname, "public", "dist"),
            filename: "bundle.js"
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: "babel-loader",
                    exclude: /node_modules/
                },
                {
                    test: /\.s?css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        {
                            loader: "css-loader",
                            options: {
                                sourceMap: true
                            }
                        },
                        {
                            loader: "sass-loader",
                            options: {
                                sourceMap: true
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: "styles.css"
            })
        ],
        devtool: isProduction ? "source-map" : "inline-source-map",
        devServer: {
            contentBase: path.join(__dirname, "public"),
            historyApiFallback: true,
            publicPath: "/dist/"
        }
    };
};

Answer 1

在_my-component.scss 中，目录仅与此文件相关。根据你的目录树，你需要上 2 个目录，本质上是回到 root/home 目录，然后再下一个目录到 public 文件夹。

在你的脚本中试试这个路径：../../public/images/wave.png