如何使用Webpack构建解决URL相对路径？

Question

我有一个SCSS文件“ _foo.scss”是指路径“ wwwroot / font”中的字体文件。 “ wwwroot”是我的webpack输出文件夹。

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

索引scss文件“ /scss/index.scss”将导入此scss文件：

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

但是webpack输出的CSS文件指向相同的路径。这是错误的，因为index.css已经在wwwroot文件夹中。引用“ ../../wwwroot”会导致找不到字体文件。

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


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

我研究了这个问题。看来我应该使用“ resolve-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

我的webpack配置：

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
};