Angular 9 / Material - 在角度組件樣式中重用材質主題變量

Question

我有帶有材料主題的標准 angular 9 應用程序。 我們遇到了包大小增加的問題，並發現我們對 scss 樣式的重用導致了這種增加。 問題是導入的 scss 是在此博客中所述的組件中編譯的。

最初，我們想在我們的角度組件中重用材質主題變量，如下所示

@import './theme.scss';

test{ background-color: mat-color($app-primary) }

為了解決這個問題，我們按照博客的.advice 將這些代碼移動為全局樣式或使用 sass mixins。 我們按如下方式實現了 sass-mixins 並在我們的組件樣式中重用了它：

@mixin primary-background-color {
  background-color: mat-color($app-primary);
}

@import 'mixins.scss'
  .test {
    @include primary-background-color;
  }

盡管如此，按照這個建議，通過使用 sass-mixins，bundle 的大小會減少一點，但不會像我們將整個代碼移動到全局樣式那樣多。

這導致了我的問題：在組件樣式中是否推薦使用重用材料主題顏色？ 我不敢相信我的問題的“解決方案”是將組件樣式移動到全局樣式！？

期待有幫助的答案！ 干杯!

Answer 1

我遇到了同樣的問題，但已經解決了。

我認為最好的解決方案是這個鏈接

我還在我的主題中添加了一個背景變量，可以在不同的組件中重復使用，如下圖所示..

主題

Answer 2

你可以用不同的方式來做到這一點：

有一種叫做“部分”的東西。 您可以為各種事物創建部分並將它們包含/導入到您的 component.scss 文件中並使用它們

例子：

在您的根級別，創建一個名為樣式的文件夾。 在樣式中，您可以創建多個部分，一個用於變量，一個用於混合，一個用於字體等，

部分文件名以下划線開頭，例如 _variables.scss、_mixins.scss 等。下划線將阻止 angular 編譯器每次編譯。

In '_variables.scss' file, you can create multiple global variables for colors, such as 

$primary-color: #fff;
$secondary-color: #333; etc

In '_mixins.scss' you can create mixins such as 
@mixin mixin-name() {
  mixins functionality
}


In your component.scss file, simply import them and use it. 

component.scss

@import '../styles/mixins';
@import '../styles/variables';

.component-class-name {
 background-color: $primary-color;
 color: $secondary-color;
}