無法使用webpack解析font-face include

Question

我在我的webpack配置中使用別名來引用我的字體文件。 無論語法如何，我都無法正確解析字體文件。 其他類似的Stack溢出帖描述了類似的行為，但沒有提供解決方案。

即： Webpack @ font-face相對路徑問題

為SCSS文件中引用的字體和圖像設置別名的正確方法是什么？ 我需要做些什么來確保這些支持資產從我的src目錄到我的dist目錄？

這是我的目錄結構

/
/src
    /styles
        base.scss
        fonts.scss
        ...
    /fonts
        myFont.eot
        ...
/dist
   /fonts
   /images
   /styles
       site.css

這是我的web.config

var mainCss = new ExtractTextPlugin(pathToStyles + "main.css");
module.exports = {
    entry: './app.js',
    output: { filename: 'bundle.js'},
    resolve: {
        alias: {
            'fonts': path.resolve(__dirname, "src/fonts"),
            'styles': path.resolve(__dirname, "src/styles")
        }
    },
    module: {
        loaders: [
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file?name=dist/fonts/[name].[ext]'
            },
            {
                test: /\.scss$/,
                loader: mainCss.extract({fallback: "style-loader", use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }]
                })
            },
            {
                test: /src\/\.css$/,
                loader: ExtractTextPlugin.extract({fallback: "style-loader", use: ["css-loader"]})
            }]
    },
    plugins: [ mainCss ]
};

app.js

require('./src/site.scss');
console.log('hey');

fonts.scss

@font-face {
    font-family: 'myFont';
    src: url('~fonts/myFont.eot');
}

site.scss

@import "~styles/base/_fonts";
body {
    color: red;
}
a {
    font-weight:bold;
    font-family: 'myFont';
}

Answer 1

我沒有安裝'文件加載器'我發現了這一點，因為我玩了字體的文件路徑。 同樣有用的是發現如何觸發調試輸出。

即webpack --display-error-details