Как вы решаете относительный путь URL с помощью сборки веб-пакета?

Question

У меня есть файл SCSS "_foo.scss" относится к файлу шрифта в пути, "wwwroot / font".«wwwroot» - это моя выходная папка в веб-пакете.

@font-face {
    font-family: myFirstFont;
    src: url("../../../wwwroot/fonts/glyphicons-halflings-regular.eot");
}

Индексный файл scss «/scss/index.scss» импортирует этот файл scss:

@import "./features/_foo.scss";

Но выходной файл css веб-пакетауказывает на тот же путь.Это неправильно, так как index.css уже находится в папке wwwroot.Ссылка на "../../wwwroot" приводит к невозможности найти файл шрифта.

@font-face {
  font-family: myFirstFont;
  src: url("../../wwwroot/fonts/glyphicons-halflings-regular.eot"); }


/*# sourceMappingURL=index.css.map*/

Я исследовал эту проблему.Кажется, что я должен использовать «resol-url-loader», чтобы переписать url ().Но это плохо работает.

Спасибо.

У меня следующая структура сайта

/
└───mySite
    ├───ClientApp
    │   │   package-lock.json
    │   │   package.json
    │   │   webpack.config.js
    │   │
    │   └───scss
    │       │   index.scss
    │       │
    │       └───features
    │               _foo.scss
    │
    └───wwwroot
        ├───css
        │       bundle.js
        │       bundle.js.map
        │       index.css
        │       index.css.map
        │
        └───fonts
                glyphicons-halflings-regular.eot
                glyphicons-halflings-regular.svg
                glyphicons-halflings-regular.ttf
                glyphicons-halflings-regular.woff
                glyphicons-halflings-regular.woff2

Моя конфигурация веб-пакета:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
    entry: ['./scss/index.scss'],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '../wwwroot/css/')
    },

    devtool: 'source-map',

    module: {
        rules: [
            {
                test: /\.s?[ac]ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {loader: 'css-loader', options: {url: false, sourceMap: true}},
                    {loader: 'resolve-url-loader', options: {sourceMap: true, debug: true}},
                    {loader: 'sass-loader', options: {sourceMap: true, sourceComments: true}}
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: "babel-loader"
            }
        ]
    },
    devtool: 'source-map',
    plugins: [
        new MiniCssExtractPlugin({
            filename: "index.css"
        })

    ],
    mode: devMode ? 'development' : 'production',
    watch: true
};