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

【问题标题】：Imported Sass file can't find font file导入的 Sass 文件找不到字体文件
【发布时间】：2019-05-09 15:26:06
【问题描述】：

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

@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 查找相对于其自身位置的字体文件？

【问题讨论】：

url 被解释为相对于您的网络根目录。
gatsby 是否使用 webpack 来构建你的模块？
是的，Gatsby 使用 webpack。
我猜你的入口点在 ./src/page-assets 中，对吗？
我不确定...这是该插件的 Git 存储库：github.com/gatsbyjs/gatsby/tree/master/packages/… 我已经浏览过它，但还没有任何反应。

标签： sass gatsby

【解决方案1】：

似乎这个问题已经解决了，但万一有人在未来遇到这个问题并想要一个替代解决方案I answered a similar question over here 并包含一个带有已部署站点的存储库，展示了在 Sass 中使用静态文件的不同方式。

【讨论】：

【解决方案2】：

我通过包含 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;
        }
    }
};

【讨论】：