导入的Sass文件找不到字体文件

Posted 2021-05-04

我正在使用gatsby-plugin-sass来包含我的sass文件。我有一个导入web-animations.sass的_typography.sass文件。我的_typography.sass有这样的font-face声明：

@font-face
  font-family: 'BrandonPrinted'
  src: url(../../global/fonts/brandonprinted-one-webfont.eot)
  src: url(../../global/fonts/brandonprinted-one-webfont.eot?#iefix) format('embedded-opentype'), url(../../global/fonts/brandonprinted-one-webfont.woff) format('woff'), url(/src/page-assets/global/fonts/brandonprinted-one-webfont.ttf) format('truetype')

当我运行gatsby develop时，我收到此错误：

ERROR  Failed to compile with 2 errors                                                                                                          19:51:15

These relative modules were not found:

* ../../global/fonts/brandonprinted-one-webfont.eot in ./~/css-loader!./~/sass-loader?{"plugins":[]}!./src/page-assets/work-ive-done/subpages/web-animations/styles/web-animations.sass
* ../../global/fonts/brandonprinted-one-webfont.woff in ./~/css-loader!./~/sass-loader?{"plugins":[]}!./src/page-assets/work-ive-done/subpages/web-animations/styles/web-animations.sass

似乎字体url路径被解释为相对于web-animations.sass相对于_typography.sass，因为如果我将web-animations.sass向上移动两个级别，则此错误消失。

有没有办法让_typography.sass查找相对于自己位置的字体文件？

答案

似乎已经解决了这个问题，但是如果有人在未来遇到这种情况并想要一个替代解决方案I answered a similar question over here并且包含一个部署网站的repo，演示了使用Sass使用静态文件的不同方法。

另一答案

我通过包括resolve-url-loader Webpack loader得到了这个工作。

这是我的gatsby-node.js文件：

"use strict";

var ExtractTextPlugin = require(`extract-text-webpack-plugin`);

var _require = require(`gatsby-1-config-css-modules`),
    cssModulesConfig = _require.cssModulesConfig;

exports.modifyWebpackConfig = function (_ref, options) {
    var config = _ref.config,
        stage = _ref.stage;

    var sassFiles = /.s[ac]ss$/;
    var sassModulesFiles = /.module.s[ac]ss$/;
    options['sourceMap'] = 'sourceMap';
    var sassLoader = `sass?${JSON.stringify(options)}`;

    switch (stage) {
        case `develop`:
        {
            config.loader(`sass`, {
                test: sassFiles,
                exclude: sassModulesFiles,
                loaders: [`style`, `css`, 'resolve-url-loader', sassLoader]
            });
            return config;
        }
        case `build-css`:
        {
            config.loader(`sass`, {
                test: sassFiles,
                exclude: sassModulesFiles,
                loader: ExtractTextPlugin.extract([`css?minimize`, 'resolve-url-loader', sassLoader])
            });

            config.loader(`sassModules`, {
                test: sassModulesFiles,
                loader: ExtractTextPlugin.extract(`style`, [cssModulesConfig(stage), 'resolve-url-loader', sassLoader])
            });
            return config;
        }
        case `develop-html`:
        case `build-html`:
        case `build-javascript`:
        {
            config.loader(`sass`, {
                test: sassFiles,
                exclude: sassModulesFiles,
                loader: `null`
            });

            config.loader(`sassModules`, {
                test: sassModulesFiles,
                loader: ExtractTextPlugin.extract(`style`, [cssModulesConfig(stage), 'resolve-url-loader', sassLoader])
            });
            return config;
        }
        default:
        {
            return config;
        }
    }
};

以上是关于导入的Sass文件找不到字体文件的主要内容，如果未能解决你的问题，请参考以下文章

Rails 3 应用程序中的 Sass 导入错误 - “找不到或无法读取要导入的文件：指南针”

使用 angular-cli、sass 和 materialize-css 找不到字体

错误：找不到要导入的文件或无法读取：node_modules/bootstrap-sass/assets/stylesheets/bootstrap

找不到或无法读取要导入的文件：指南针

Visual Studio 2015 在该位置找不到字体

Sass - 为从文件导入的所有类添加前缀（使用 sass 导入或 webpack 加载器）