Question

我正在尝试将多个scss文件导入到我的Vue2项目中但是我在编译时遇到错误 - 我怀疑这是可能的，它只是我的实现是错误的...

我的'main.scss'文件使用以下行导入'index.js'：

import './styles/main.scss'

然后，在我的'main.scss'文件中，我有以下内容：

@import "./base.scss";// color pallete
@import "./variants.scss"; //variant colors using primary colors from base.scss

'base.scss'如下所示：

$slim-color-brand-orange: #e87820;
$slim-color-brand-blue: #004a79;
$slim-color-brand-charcoal: #595a59;

'variantss.scss'如下所示：

$slim-color-brand-orange-light: lighten($slim-color-brand-orange, 15%);
$slim-color-brand-blue-light: lighten($slim-color-brand-blue, 15%);
$slim-color-brand-charcoal-light: lighten($slim-color-brand-charcoal, 15%);

但是我收到的错误如下所示：

 Undefined variable: "$slim-color-brand-light-blue-l5"

以下是我如何使用变量的示例：

background-color: $color-error-background;

有谁能告诉我我做错了什么？ - 提前致谢;）

Answer 1

只要你的背景颜色：$ color-error-background在你的main.scss文件中，在import语句之后就可以了。

Base和Variants包含变量。任何导入它们的scss文件都可以访问这些变量。

我认为问题可能是导入index.js。

导入多个scss文件

1 个答案: