我目前正在使用以下样式表结构来收集我在多个项目中使用的帮助函数:
/* helpers.scss */
@import "imports/variables"; // contains config sass map
@import "imports/utility"; // uses code from "variables"
@import "imports/functions"; // uses code from "variables" and "utility"
@import "imports/mixins"; // uses code from "variables", "utility" and "functions"
@import "helpers";
然后我会在我的个人项目中使用导入文件。由于@import
将所有内容都放在全局范围内。我所有的 mixin、函数、实用程序和变量都可以相互访问。
输入 dart-sass 及其作用域/模块方法。我花了最后一天的大部分时间来尝试迁移上述样式表结构,但无法使其正常工作。这是我尝试过的对我来说似乎合乎逻辑的方法:
/* helpers.scss */
@forward "imports/variables"; // contains sass config map with !default flag;
@forward "imports/utility"; // uses code from "variables"
@forward "imports/functions"; // uses code from "variables" and "utility"
@forward "imports/mixins"; // uses code from "variables", "utility" and "functions"
/* utility.scss */
@use "variables" as *; // grant access to "variables"
...
/* functions.scss */
@use "variables" as *; // grant access to "variables"
@use "utility" as *; // grant access to "utility"
...
/* mixins.scss */
@use "variables" as *; // grant access to "variables"
@use "utility" as *; // grant access to "utility"
@use "functions" as *; // grant access to "functions"
...
最后,我将在我的个人项目中导入上述文件:
/* my-project.scss */
@use "helpers" as * with (
$config: (
breakpoints: (
xs: 320px,
sm: 568px,
...
),
...
),
);
...
在尝试使用上面显示的文件结构将旧项目从 libsass 迁移到 dart-sass 时,我遇到了几个围绕$config
变量的错误消息,最常见的是这两个:
Dart Sass failed with this error: Undefined variable.
Dart Sass failed with this error: This module and the new module both define a variable named "$config".
有人可以指出我做错了什么吗?任何帮助将非常感激。首先十分感谢。