无法解析字体包括使用 webpack答案

【问题标题】：Cannot resolve font-face include using webpack无法解析字体包括使用 webpack
【发布时间】：2018-04-27 18:30:07
【问题描述】：

我在我的 webpack 配置中使用别名来引用我的字体文件。无论语法如何，我都无法正确解析字体文件。其他类似的堆栈溢出帖子描述了类似的行为，但没有提供解决方案。

即：Webpack @font-face relative path issue

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

【问题讨论】：

标签： javascript css webpack fonts sass

【解决方案1】：

我未能安装“文件加载器”我在玩弄字体的文件路径时发现了这一点。发现如何触发调试输出也很有帮助。

即webpack --display-error-details

【讨论】：