Не удается разрешить относительный URL - PullRequest
Новая
       84

Не удается разрешить относительный URL

0 голосов
/ 06 августа 2020

Когда я использую относительный URL-адрес в файле S CSS (я пытаюсь установить свойство background-image для локального файла), я получаю следующую ошибку:

enter image description here

Any idea how what is going wrong?

I have a project with the following structure:

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

In MyComponent.js I render .

В _my-component.s css У меня есть: 

.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/"
        }
    };
};

1 Ответ

0 голосов
/ 06 августа 2020

В _my-component.scss каталоги относятся только к этому файлу. В соответствии с вашим деревом каталогов вам потребуется go вверх 2 каталога, что по сути возвращается в корневой / домашний каталог, а затем один каталог вниз в папку publi c.

Попробуйте этот путь в вашем скрипте: ../../public/images/wave.png

...