Question

所以我有以下字体设置：

$font-path: '~@/assets/fonts/';
@font-face {
    font-family: 'mainFont';
    font-weight: 300;
    font-style: normal;
    src: url('#{$font-path}mainFont/mainFont.eot') format('eot'),
    url('#{$font-path}mainFont/mainFont.woff2') format('woff2'),
    url('#{$font-path}mainFont/mainFont.woff') format('woff'),
    url('#{$font-path}mainFont/mainFont.ttf') format('truetype'),
    url('#{$font-path}mainFont/mainFont.svg#mainFont') format('svg');
}

构建（使用vue.js webpack顺便说一句）按预期工作。该应用程序无法加载字体。 src网址指向错误的目录。将$font-path更改为相对于输出文件（as suggested）的文件夹时，构建失败，因为它无法找到字体。

Answer 1

使用file-loader并在您的规则中使用类似的内容（示例来自我的项目）：

{
    test: /\.(woff2?|ttf|otf|eot|svg)$/,
    exclude: /node_modules/,
    loader: 'file-loader',
    options: {
        name: '[path][name].[ext]'
    }
}

这会将文件复制到您的构建文件夹中，并将正确的URL注入CSS中的那些文件。

第二件事是将resolve-url-loader添加到您的scss规则中：

{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
    })
}

Webpack sass-loader：如何正确使用字体？

1 个答案: