Angular-CLI全局scss变量

Question

如何在最新的Angular-CLI中添加全局scss变量(与webpack)？

看起来在styles.scss中定义的全局变量在组件样式中不可用。

Answer 1

它们需要通过相对路径导入到组件的SCSS文件中。这将允许编译器找到所需的父文件进行处理。

Answer 2

您必须在尝试使用全局变量的每个组件的样式表中导入全局SCSS文件。只是为了减少使用相对路径编写导入路径时的痛苦和挫败感。可以使用绝对路径w.r.t根文件夹(src)

@import '~names.scss'

注意:这里假设所需的全局样式放在NgApp根目录的顶部。在文件名前加上"~“，告诉angular-cli的webpack它不是相对路径。

Answer 3

我尝试在其他全局风格的文件中使用variables.scss文件，发现有两种方法，但只有一种有效(Angular CLI1.0.0 21)：

我在Assets文件夹下添加了一个variables.scss文件和一个site.scss文件。site.scss中的属性引用在variables.scss中设置的变量。

有两种方法可以包含全局样式。%1正在将导入语句放入全局styles.scss。

第二种方法是将它们放在angular-cli.json中的Styles数组下。

当我使用第一种方法时，我不能让Site中的变量工作(没有错误，只是不呈现)。

然而，当我将所有的全局样式移到angular-cli.json中时，它确实可以工作(这花了几个小时的时间来证明)。您仍然需要使用导入引用同级文件，以便声明变量。如果需要的话，我可以说得更详细一些。

@import 'variables.scss';