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

2024-05-26

我正在使用 gatsby-plugin-sass 来包含我的 sass 文件。我有一个web-animations.sass导入的文件_typography.sass. My _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寻找相对于其自身位置的字体文件?


似乎这个问题已经解决了,但万一将来有人遇到这个问题并需要替代解决方案我在这里回答了类似的问题 https://stackoverflow.com/a/56053550/379841并包含一个带有部署站点的存储库,演示了通过 Sass 使用静态文件的不同方法。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

导入的Sass文件找不到字体文件 的相关文章

  • 安装 Sass 时出错(Ruby 2.5.0.1、MSYS2 20161025.0.0)

    我尝试安装 Sass 我安装了Ruby and MSYS2在此之前 来自所有人的最新消息巧克力味 https chocolatey org choco install ruby choco install msys2 看来它们已正确安装 r
  • 让 Compass 将供应商前缀添加到动画选择器

    谁能告诉我如何让 Compass 在编译时将供应商前缀添加到 CSS3 动画选择器中 我的配置文件如下所示 http path css dir sass dir images dir img javascripts dir js outpu
  • 我的整个 Rails 应用程序仅从一个文件获取 css 为什么

    我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css 我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从product css我为两个控制器添加了不同的 css 文件 但我的整个应用程序仅从p
  • 如何在Eclipse中集成CSS预处理? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在 Eclipse 中编辑 SCSS 文件 最好使用语法突出显示 scss files 我发现这些资
  • 样式标签中的源映射是否有效?

    我在标签和源映射中遇到 CSS 问题 为了缩短项目的加载时间 我改变了将 CSS 放入 HTML 的方式 将其改为 h1 Source maps working wonderfully h1 进入这个
  • Firefox Placeholder Before CSS 选择器不起作用

    我使用的是最新的firefox 30 0 我正在尝试在必填字段的占位符之前插入红色字体真棒星号 我在 Chrome 中工作没问题 但我在 FF 和 上遇到问题 这是一个说明我的问题的代码笔 http codepen io anon pen
  • 导入的Sass文件找不到字体文件

    我正在使用 gatsby plugin sass 来包含我的 sass 文件 我有一个web animations sass导入的文件 typography sass My typography sass有一个像这样的字体声明 font f
  • Gatsby 的 GraphQL 查询 - 具有灵活内容模型的内容设置

    我有一个gatsby网站与内容丰富的插件 and graphql 查询 设置正在运行 编辑 我的 gatsby 设置使用 pageCreate 功能动态提取数据 并填充我的模板组件 即我在下面共享的根 graphql 查询 如果 conte
  • 多个应用程序中的 Angular 共享资产

    我正在开发多个小型应用程序 这些应用程序将共享公共和共享模块以及资产 关于如何创建项目结构的部分已在这里回答 https stackoverflow com a 61254557 1351452 https stackoverflow co
  • Azure DevOps 管道构建工件中缺少 Gulp 编译的 CSS 文件夹

    一点背景 我有一个小型 dotnet 核心应用程序 该应用程序托管在 Azure 上 并且正在使用 Azure DevOps Pipelines 进行构建和部署 在我们开始使用 DevOps Pipelines 之前 CI 直接连接到 Az
  • WebpackError:ReferenceError:Gatsby 上未定义窗口

    我已经在互联网上进行了大量搜索 但无法解决这个问题 我正在使用 Gasby 开发静态页面 但遇到此错误 WebpackError ReferenceError window is not defined 我的线索是 这与我正在使用的引导 模
  • 仅扩展 Sass 的第一级

    我有几行 Sass content width 960px padding 15px 0 margin auto background inherit p text align justify padding 10px 在某些地方 我想用
  • 如何更改 bootstrap 版本 4 按钮颜色

    我可以通过更改 bootstrap v4 中的主题颜色来更改主按钮颜色 但它也会影响所有其他组件 如何设置主按钮颜色而不影响主题颜色 我不想设置品牌为主并实现它 还有其他选择吗 Bootstrap 4 1 2019 年更新 现在 Boots
  • 如何将 css 预处理器与 Angular 7 一起使用

    我是预处理器世界的新手 我如何使用它们 特别是 postcss 和 LostGrid 与 Angular 7 我正在尝试申请这段代码 https codepen io anon pen BeLWeb有角度的 正如你所看到的 它使用postc
  • 如何获取站点地图 Gatsby 静态文件的更新/lastmod 值

    我一直在使用 Gatsby 并一直在尝试创建一个sitemap with lastmod静态页面的值 src pages 我看到一个随机代码片段 其中有人在他的代码中运行了下面的查询gatsby config js并能够获得他上次修改它们的
  • Rails 资产管道:CSS 无效

    我正在尝试使用http designshack net articles css build an animated photo wall with css http designshack net articles css build a
  • 使用尾随与号 (&) 作为类组合选择器,而不是后代选择器

    我想申请一个班级 highlight到一堆不同的元素并根据元素类型设置它们的样式 我可以这样做 input type text highlight select highlight someOtherSelector hightlight
  • 将 SCSS 与使用 angular-cli 创建的 Angular 库结合使用

    我创建了一个角度库项目 我想在其中使用 SCSS 样式 所以我已经配置了 ng config schematics schematics angular component styleext scss 这进入了角度 json file sc
  • CSS - SASS:使用基于@each的mixins来生成多个背景

    我正在使用 CSS 创建发型和颜色目录 我有 55 种不同颜色和发型的组合 每种发型和颜色都有自己的图像 SVG 文件 我需要将它们全部组合成一个背景 使用 CSS3 的多背景功能 我编写了这个混合来生成多个背景 它基于 mixin在这篇文
  • 基于现有类的 Sass 'if' 语句

    我是 Sass 新手 想使用 if 语句来检测元素上的现有类 以便生成相关的 css 我的设置有大量 Javascript 生成的图像 这些图像被分配了唯一的 ID 以及 图片 类和随机分配的上 右 下或左类 我还使用 Sass 的随机函数

随机推荐