Angular css文件导入导致预算问题

我是一名初级开发人员，没有太多经验，目前正在从事一个大型项目。 我们使用棱角材质，为应用程序创建自定义主题。 我们有一个global style.scss文件，其中导入所有其他全局文件（例如按钮全局样式），两个主题文件，其中放入相应的调色板和一些预定义变量，以及至少一个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.scs中导入了这个变量文件，预算就爆炸了

我寻找一个解决方案，继续调用预定义的变量，而不破坏预算。 我没有足够的经验来真正理解预算以及为什么我的进口使它增长。 如果有人能给我解释一下，并给我一个解决方案，我会很高兴读到的

---

提前多谢

尽量不要将变量导入component.scss。IDE可能会显示一些警告，但我认为它仍然有效。如果按预算意味着大小？我尝试不导入变量，但如果我这样做编译失败。我想，如果不导入变量，我就不能使用mat color。是的，是这样的，当我导入变量时，这个大小会增长很多：/I我也尝试只导入主题文件，但它不起作用。variables.scss文件有多大？1.4Ko，我们使用jenkins在github上检查我们的PR，它说预算超出630Ko。我在8 component.scss中导入变量。每次我将variables.scss导入组件时，它是否会导入所有材质角度库？我还没有成功地在组件中使用sass。我发现，当我无法覆盖位于页面中某个其他类下面的组件样式时，这很困难。我对主题也有自己的想法。我所做的是在styles文件夹中构造sass文件。那么你就不需要一次又一次地导入变量了。看看这个：。第一部分构建您的Sass。如果你能忍受这些缺点。corr.components SCS将位于样式/组件文件夹中。请不要将变量i导入component.SCS。IDE可能会显示一些警告，但我认为它仍然有效。如果按预算意味着大小？我尝试不导入变量，但如果我这样做编译失败。我想，如果不导入变量，我就不能使用mat color。是的，是这样的，当我导入变量时，这个大小会增长很多：/I我也尝试只导入主题文件，但它不起作用。variables.scss文件有多大？1.4Ko，我们使用jenkins在github上检查我们的PR，它说预算超出630Ko。我在8 component.scss中导入变量。每次我将variables.scss导入组件时，它是否会导入所有材质角度库？我还没有成功地在组件中使用sass。我发现，当我无法覆盖位于页面中某个其他类下面的组件样式时，这很困难。我对主题也有自己的想法。我所做的是在styles文件夹中构造sass文件。那么你就不需要一次又一次地导入变量了。看看这个：。第一部分构建您的Sass。如果你能忍受这些缺点。corr.components SCS将位于styles/components文件夹中