在一个地方导入所有文件时，sass变量无法在Ionic-4中工作。

Question

我在variables中创建了一个文件夹名为app。在文件夹中，我创建了名为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，角质和SASS完全陌生。

无法理解这到底是哪里出了问题。有什么线索或解决办法吗？提亚

Answer 1

每个文件都是独立单元，这意味着每个文件都有自己的作用域。

我不知道为什么tab2不抛出编译错误，但是tab2和tab3是从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";