如何使用 CDN 中的 sass 变量答案

【问题标题】：how to use sass variables from a CDN如何使用 CDN 中的 sass 变量
【发布时间】：2021-12-30 14:03:08
【问题描述】：

我有一个项目使用 create-react-app 和一个远程托管的 colors.scss 文件，其中只有颜色的定义（内容如下）。

$color-blue: #2281ff;
$color-cyan: #11a0f2;
$color-lue-light: #cfd7fc;

接下来我有一个index.scss，看起来如下：

@import url('http://url.domain/colors.scss');

body: {
  background-color: $color-blue;
}

在构建应用程序时出现以下错误

SassError: Undefined variable: "$color-blue".
        on line 4 of src/index.scss
>>   background-color: $color-blue;

这是在使用node-sass时

接下来我尝试将node-sass 更改为dart-sass，这只是sass 所以运行npm uninstall node-sass 然后npm install sass

我的文件看起来像这样

@use url('http://url.domain/colors.scss');

body: {
  background-color: $color-blue;
}

这产生了一个错误

SassError: Expected string.
  ╷
1 │ @use url('http://url.domain/color.scss');

将导入重写为

@use "http://url.domain/color.scss";

成功

SassError: Can't find stylesheet to import.
  ╷
1 │ @use "http://url.domain/color.scss";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

不能使用来自远程源的变量吗？还是我错过了什么？

注意：http://url.domain/color.scss 是链接的抽象版本，当真正的链接粘贴到浏览器中时，我可以看到加载了变量的正确样式表。

【问题讨论】：

【解决方案1】：

是的，您不能使用远程 SCSS 文件中定义的变量。我们遇到了类似的问题。因此，我们在构建过程中下载了远程 scss 文件，并将下载的文件作为本地文件引用。

【讨论】：