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

Posted 2023-02-22

【中文标题】Webpack sass-loader：如何正确使用字体？

【英文标题】：Webpack sass-loader: How to correctly use fonts?

【发布时间】：2017-10-30 19:22:01

【问题描述】：

所以我有以下字体设置：

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

构建（使用 vue.js webpack btw）按预期工作。该应用程序将无法加载字体。 src url 指向错误的目录。 将 $font-path 更改为相对于输出文件 (as suggested) 的文件夹时，由于找不到字体，构建失败。

【问题讨论】：

不知道行不行，看一下resolve-url-loader

【参考方案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']
    )