Ionic4构建错误：page.scss中的未定义SCSS变量

Question

我创建了一个空白的Ionic4应用，并在src/global.scss中声明了一个变量$padding: 16px。然后，我尝试在home.page.scss中的元素中使用$ padding，如下所示：

.highlight {
  padding: $padding;
}

我希望它能像在Ionic3中一样输出以下内容：

.highlight {
  padding: 16px;
}

在Ionic4中，我在构建过程中的$ padding上得到了一个未定义的变量。我们可以不再在页面样式内使用全局SCSS变量吗？还是我在这里遗漏了一些明显的东西？

Answer 1

您需要在page.scss文件中导入global.scss文件，以使其正常工作

@import '../../global.scss';

由于global.scss已包含在项目中。因此，解决方案是创建一个新文件 common.scss ，然后使用

将其导入page.scss中

@import '../../common.scss';

在common.scss中，您可以输入

$padding: 16px