Angular 2/4：为每个模块加载 sass 变量

Posted 2023-03-07

【中文标题】Angular 2/4：为每个模块加载 sass 变量

【英文标题】：Angular 2/4: Loading sass variables per module

【发布时间】：2017-12-27 15:04:42

【问题描述】：

我们有一个定义组件的核心模块和继承核心模块的子模块（在单个应用程序中）。子模块包含子组件，子组件继承自核心组件。

核心模块中的每个组件都通过 sass 导入来导入变量。我希望子组件使用不同的不同 sass 变量，但不必重新定义所有 css 规则。

我怎样才能做到这一点？

注意：如果每个子模块都在单独的应用程序中，我已经找到了解决方案。使用 .angular-cli.json 中的“stylePreprocessorOptions”配置（每个应用程序定义），我可以使用文件名而不是文件相对路径在核心组件中导入变量。这样，每个子组件都使用正确的变量文件而无需做任何事情。但我不想使用多个应用程序，因为我们将拥有大约 40 个应用程序......

谢谢

【参考方案1】：

如果您要更改项目中现有的样式

ng set defaults.styleExt scss

Cli 处理其余部分。

当您创建每个组件时，它在使用 CLI 创建时具有独立的 scss 文件。你能解释一下你的确切问题可能是显示代码结构吗？

【讨论】：

我的项目已经在使用 sass。我希望能够更改模块中所有组件的 sass 变量，而不必重新定义所有组件中的 sass 导入

导入中的相对路径有问题吗？

不，如果子模块位于不同的应用程序中，这有效，正如我在问题中提到的那样。就我而言，我希望我的所有模块都在同一个应用程序中，所以我不能使用它