Question

我是一名初级开发人员，我没有很多经验，目前正在从事一个大型Angular项目。我们使用Angular Material并为我们的应用程序创建自定义主题。我们有一个global style.scss文件，其中导入了所有其他全局文件（例如，用于按钮全局样式），还有2个主题文件，其中分别放置了调色板和一些预定义的变量，以及至少一个variables.scss文件位于其中。我们定义了主题。

在进入这个项目之前，我的同事使用全局变量来自定义诸如var(--primary)之类的元素。但是现在，我们要更改此设置，不再使用全局变量。所以现在，我使用mat-color函数。它允许我在主题文件中调用我的预定义属性：

// Predefined property in theme file
// Background palette for light theme.
$background-color: (
  background: #FAFAFA,
  border:     #D8D8D8,
  white-bg:   #FFFFFF,
  hover:      rgba(white, 0.04),
  card:       #FFFFFF,
  dialog:     map_get($mat-grey, 800),
  disabled-button: #B9C2CB,
  stroked-button: map-get($mat-blue, 50),
  focused-button: $light-focused,
  selected-button: map_get($mat-grey, 900),
);

当我需要更改特定组件的颜色并且无法在全局scss文件中完成此操作时，我会这样：

我将component.scss文件中的variables.scss文件导入
我使用mat-color调用预定义属性。

示例：

@import 'variables';

.article {
border: solid 1px mat-color($background-color, border);
}

到目前为止，一切正常！我的问题是这里有预算，并且由于在某些component.scss中导入了此可变文件，预算才刚刚爆炸。

我需要一个解决方案，以继续调用我的预定义变量，而不会增加预算。我没有足够的经验来真正了解预算以及为什么我的进口使预算增加了。如果有人可以向我解释并为我提供解决方案，我将很高兴阅读它！

非常感谢！

由于css文件导入而导致预算问题

0 个答案: