Question

如何在最新的Angular-CLI（使用webpack）中添加全局scss变量？

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

Answer 1

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

Answer 2

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

@import '~names.scss'

注意：这里假设所需的全局样式位于NgApp根目录的顶部。使用＆＃34; 〜＆＃34;前置文件名。告诉webpack of angular-cli它不是相对路径。

Answer 3

我试图在其他全局样式文件中使用variables.scss文件，发现有两种方法可以做到但只有一种有效（Angular CLI 1.0.0 21）：

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

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

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

当我第一种方式时，我无法让Site中的变量起作用（没有错误，只是不渲染）。

但是，当我将所有的全局样式移到angular-cli.json中时，它就可以工作了（这需要花费几个小时的时间来证明）。您仍然需要使用导入引用同级文件，以便声明变量。如果需要，我可以详细介绍......

@import 'variables.scss';

Answer 4

您必须从组件文件中导入变量所在的文件：

@import "XX/XX/XX/_name.scss";

XX是带有变量的文件的相对路径

Answer 5

嘿，我使用这个webpack配置解决了。因此sass-loader获取选项“data”，您可以在其中声明import语句。

if (!CheckNonNegative(arg)) {
    throw new ArgumentException(nameof(arg));
}
...
if (arg == 0) {
    ... // Do something
} else {
    Debug.Assert(arg > 0, "Method has checked arg to be non-negative");
    ... // Do something else
}

Angular-CLI全局scss vairables

5 个答案: