如何從另一個scss文件訪問我的主要主題顏色？

Question

我有你的標準Angular Material主題。這是我的theme.scss文件：

@import '~@angular/material/core/theming/all-theme'; 
@include mat-core(); 

$candy-app-primary: mat-palette($mat-light-blue); 
$candy-app-accent: mat-palette($mat-red, A200, A100, A400); 
$candy-app-warn: mat-palette($mat-yellow); 
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn); 

@include angular-material-theme($candy-app-theme); 

我只想從各種組件scss文件訪問我的主題顏色。我已經嘗試了幾件事，最近一次是這樣的：

@import 'src/theme'; 

.problem { 
    background-color: $candy-app-accent; 
} 

我剛剛得到錯誤。我確信我在這裏錯過了一些非常重要的東西。

錯誤我越來越：

/src/app/dashboard/dashboard.component.scss 
Module build failed: 
undefined 
      ^
     (50: #fce4ec, 100: #f8bbd0, 200: #f48fb1, 300: #f06292, 400: #ec407a, 500: #e91e63, 600: #d81b60, 700: #c2185b, 800: #ad1457, 900: #880e4f, A100: #ff80ab, A200: #ff4081, A400: #f50057, A700: #c51162, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: white, 600: white, 700: rgba(255, 255, 255, 0.87), 800: rgba(255, 255, 255, 0.87), 900: rgba(255, 255, 255, 0.87), A100: rgba(0, 0, 0, 0.87), A200: white, A400: white, A700: white), default: #ff4081, lighter: #ff80ab, darker: #f50057, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "500-contrast": white, "600-contrast": white, "700-contrast": rgba(255, 255, 255, 0.87), "800-contrast": rgba(255, 255, 255, 0.87), "900-contrast": rgba(255, 255, 255, 0.87), "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": white, "A400-contrast": white, "A700-contrast": white, "contrast-contrast": null) isn't a valid CSS value. 
     in C:\Users\Error\Dropbox\Programming\OTB\OTB-Dashboard\node_modules\@angular\material\core\theming\_theming.scss (line 30, column 14) 
@ ./src/app/dashboard/dashboard.component.ts 62:17-54 
@ ./src/app/app.module.ts 
@ ./src/main.ts 
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts 

最新資訊：

所以一些嘗試，它看起來像在我的組件SCSS文件後，我可以創建變量並沒有任何問題，請使用他們通過該文件。似乎問題實際上是我似乎無法正確導入一個scss文件到另一個。當我使用@import'src/theme';它確實找到了該文件，但由於某種原因，當我嘗試從文件中使用變量時，它會崩潰。

Answer 1

您必須導入SASS文件中yours.so SASS編譯R可以達到主題背景