将sass变量导入gatsby组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将sass变量导入gatsby组件相关的知识,希望对你有一定的参考价值。

我正在使用Gatsby构建一个静态站点项目。我已经成功安装了gatsby sass插件并让sass工作,但是,我无法将我的自定义sass变量文件正确导入到其他组件sass文件中。

以下是我的文件夹结构:

`--src
  -components
   -header
    -header.js
    -header.sass
 --layouts
  -index.js
  -index.sass
 --pages
  -page1.js
  -page1.sass
 --sass
  -_color.sass
  -_global.sass
  -_mixins.sass
  `

如上所示,我使用自定义'sass'文件夹来存储所有全局变量和样式,然后将它们导入到需要它们的每个组件sass中(我知道这可能不是传统的方法,但我还是新的反应和gatsby,并且还不熟悉其他方法,例如组件css。例如,如果我需要访问'page1.sass'中的颜色变量,我会将颜色sass文件导入page1.sass,并在那里定义特定的组件样式。问题是,这样做,我得到“未定义变量”错误。我检查了我的导入路径,一切似乎都是正确的,我无法弄清楚出了什么问题。最奇怪的是,输入mixins似乎工作得很好。导入sass变量时,这个问题似乎是独一无二的。我在这里错过了什么吗?

答案

您应该使用.scss而不是.sass

sass存在一些问题,因此使用.scss可以解决您的问题

以上是关于将sass变量导入gatsby组件的主要内容,如果未能解决你的问题,请参考以下文章

我可以导出 Sass 变量并将它们导入 Angular Typescript 变量吗?

VueJS 和 SASS - 在脚本中导入和使用 SASS 变量

错误:使用 Sass 的 Angular 组件中的未定义变量

Angular 2/4:为每个模块加载 sass 变量

全局SASS/SCSS变量在Vue项目中应用解决方案

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