Вопрос:

Импортированный файл Sass не может найти файл шрифта

sass gatsby

805 просмотра

2 ответа

544 Репутация автора

Я использую gatsby-plugin-sass для включения моих файлов sass. У меня есть web-animations.sassфайл, который импортирует _typography.sass. У My _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

Кажется, что путь к шрифту интерпретируется как относительный, web-animations.sassа не относительный, _typography.sassпотому что, если я перейду web-animations.sassна два уровня вверх, эта ошибка исчезнет.

Есть ли способ _typography.sassискать файлы шрифтов относительно их собственного местоположения?

Автор: Eric Johnson Источник Размещён: 10.01.2018 02:27

Ответы (2)


0 плюса

544 Репутация автора

Я получил это, включив загрузчик веб-пакетов resol-url-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;
        }
    }
};

Автор: Eric Johnson Размещён: 05.03.2018 05:22

1 плюс

125 Репутация автора

Похоже, это решено, но в случае, если кто-то столкнется с этим в будущем и захочет найти альтернативное решение, я ответил на аналогичный вопрос здесь и включил репозиторий с развернутым сайтом, демонстрирующий различные способы использования статических файлов с Sass.

Автор: rdela Размещён: 09.05.2019 06:46
Вопросы из категории :
32x32