如何解决Ember pod 样式组件 SCSS:变量未定义
我正在开发一个使用 ember-cli-sass
和 ember-component-css
的 pod 风格的 ember 应用。
我在 app/styles/app.scss
中定义了一个如下所示的变量:
$yellow: #f2d173;
但是当我尝试在位于 app/components/login-form/styles.scss
的组件的 scss 文件中使用该变量时,我收到一个错误消息:
Error: Undefined variable.
我本来希望 app.scss 文件首先被加载,并且我的变量可以在我的组件中访问 - 但有些东西工作不完美。
有人知道如何在我的组件中访问应用程序范围的 scss/sass 变量吗?
解决方法
包含文件/传递 var 可能有问题... 有关您的项目组织的更多信息会有所帮助 ...
您如何组织/包含您的模块/文件(@import
或新规则 @use
)?
你的项目的文件/目录结构如何?
如果您以传统方式使用 @import
,则将文件/模块导入主文件的顺序很重要。您可以检查:
- 如果
@import
:
在.../login-form/styles.scss
中设置变量后,是否将app/styles/app.scss
导入 main.scss?
(如果您使用的是 ember pod 样式的 css 文件,您可能正在从 login-form
导入 @import "pod-styles";
的样式,请确保您的变量定义在该行之前!)
如果您确实使用新技术 @use
,那就另当别论了,可能会有点棘手。您可以检查:
-
如果
@use
:
设置变量的文件 (app/styles/app.scss
)@use
是否已设置为.../login-form/styles.scss
您需要变量的位置? -
Alertnative if
@use
: 如果模块app/components/login-form/styles.scss
本身是@use
,那么您在@use
时是否将变量传递给模块?
由于 @use
是新的,以下是有关其工作原理的更多信息:https://sass-lang.com/documentation/at-rules/use。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。