眾所周知，我們使用 Angular CLI 建立 Component 之後，每個 Component 都會有自己的專屬 styles 檔案。通常情況下，也存在另一種可能性，即可能需要在元件中包含全域性(global)樣式檔案（尤其是變數檔案，即 variable files）。

假設在 src/stylings 資料夾下有一個檔案：_variables.scss：

其內容如下：

// your _variables.scss file
$brand-color: #800000;

我們的 Component 模板檔案：

<!-- hello.component.html -->
<h1>
  Hello World!
</h1>
 

Component 的 style 檔案：

// hello.component.scss
@import "../../../stylings/variables"; // this is not cool!

h1 {
    color: $brand-color;
}

上面程式碼裡出現的層級結構操作符，../, 意思是當前目錄的父目錄，這種寫法可讀性不好，且容易出錯。

如果您的專案是使用 Angular CLI 生成的，您可以在 .angular.cli.json 檔案中新增配置 stylePreprocessorOptions > includePaths。 此配置允許開發人員新增將檢查匯入的額外基本路徑。 它告訴 Angular CLI 在處理每個元件樣式檔案之前，在上述路徑中查詢樣式檔案。

例如，在我們的例子中，讓我們在路徑中新增 ./stylings。 由於配置接受陣列型別，因此我們可以新增多個路徑。

{
	...
	"apps": [{
		"root": "src",
		...
		"stylePreprocessorOptions": {
			"includePaths": [
			  "./stylings"
			]
		}
		
	}]
}

注意，在高版本的 Angular 專案裡，上述配置位於檔案 angular.json 內：

"stylePreprocessorOptions": {
              "includePaths": [
                "./projects",
                "./projects/storefrontstyles/scss",
                "./feature-libs"
              ]
            },
 

現在，我們可以修改我們的 Component Style 檔案了：

// hello.component.scss
@import "variables"; // change to just variables, say goodbye to ../../../stylings/

h1 {
    color: $brand-color;
}

如果我們有兩個同名的 global style 檔案，但是位於不同的目錄下，則又該如何配置？

例如我們具有如下的層級結構：

_variables.scss 檔案的內容：

// stylings2/_variables.scss
$brand-color: blue;
$font-size-large: 40px;

將這個 scss 檔案所在的目錄，stylings2 也新增到 includePaths 陣列內：

更新元件自己的 scss 檔案：

// hello.component.scss
@import "variables";

h1 {
	color: $brand-color;
	font-size: $font-size-large;
}

重新整理應用，遇到錯誤訊息：undefined variable. 雖然 stylings2 資料夾裡包含的 variables.scss 檔案裡，確實定義了變數 $font-size-large，但無法被專案正確解析到。

事實證明，如果有多個同名檔案，Angular CLI 將只選擇第一個匹配名稱的檔案。 在這種情況下，它將選擇 ./stylings 資料夾下的 _variables.scss 檔案。 這就是它無法獲取變數 $font-size-large 的原因，因為這個變數定義在 styling2/_variables.scss 檔案中。

解決方案

將 angular.json 裡 includePaths 的值修改成 styling 和 styling2 兩個資料夾的父資料夾。

{
	...
	"apps": [{
		"root": "src",
		...
		"stylePreprocessorOptions": {
			"includePaths": [
			  "."
			]
		}
		
	}]
}

然後 Component 的 scss 檔案修改成如下，直接相對於 styling 和 styling2 的父資料夾路徑進行引用：

// hello.component.scss
@import "stylings/variables";
@import "stylings2/variables"; 

h1 {
	color: $brand-color;
	font-size: $font-size-large;
}