sass 在一处导入所有文件时，变量在 Ionic-4 中不起作用

Question

我在 app 中创建了一个名为 variables 的文件夹。在文件夹中，我创建了名为 customColor.scss 的 sass 文件。所以现在 customColor.scss 我在下面发布了我的颜色。

customColor.scss

$color-primary: #1706b3;
$color-primary-light: #393b8f;
$color-primary-dark: #28b485;
$color-secondary-light: #ffb900;
$color-secondary-dark: #ff7730;
$color-tertiary-light: #2998ff;
$color-tertiary-dark: #5643fa;
$color-grey-light-1: #f7f7f7;
$color-grey-light-2: #eee;
$color-grey-dark: #777;
$color-grey-dark-2: #999;
$color-grey-dark-3: #333;
$color-white: #fff;
$color-black: #000;

现在，在我的 app.comoponent.scss 中，我已经导入了我所有的内部文件夹 scss 文件，如下所示

@import "./variables/customColor.scss";
@import "./tab2/tab2.page.scss";
@import "./tab3/tab3.page.scss";

我的自定义颜色在 tab2.page.scss 中工作正常，但在 tab3.page.scss 中不工作。我收到以下错误。

./src/app/tab3/tab3.page.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    background-color: $color-black;
                     ^
      Undefined variable: "$color-black".
      in D:\myApp\src\app\tab3\tab3.page.scss (line 44, column 23)

注意： 如果我将我的 customColor.scss 导入到 tab3.page.scss，它就会工作。 我对 Ionic、Angular 和 SASS.
完全陌生 无法理解哪里出了问题。任何线索或修复？ TIA

Answer 1

每个文件都是独立的单元，也就是说每个文件都有自己的范围。

我不知道为什么 tab2 没有抛出编译错误， 但是 tab2 和 tab3 是 encapsulated 来自 customColors，这意味着您需要在其中导入 customColors。

customColor.scss

$color-primary: #1706b3;
$color-primary-light: #393b8f;
$color-primary-dark: #28b485;
$color-secondary-light: #ffb900;
$color-secondary-dark: #ff7730;
$color-tertiary-light: #2998ff;
$color-tertiary-dark: #5643fa;
$color-grey-light-1: #f7f7f7;
$color-grey-light-2: #eee;
$color-grey-dark: #777;
$color-grey-dark-2: #999;
$color-grey-dark-3: #333;
$color-white: #fff;
$color-black: #000;

tab2.page.scss

@import "../variables/customColor.scss";

tab3.page.scss

@import "../variables/customColor.scss";

也许添加 globals.scss

@import "./variables/customColor.scss";
@import "./tab2/tab2.page.scss";
@import "./tab3/tab3.page.scss";

然后在app.comoponent.scss

@import "./customColor.scss";