假設我們的 Angular 專案具有下列這個檔案結構：

![](https://img-blog.csdnimg.cn/img_convert/d081c2828f651be980dbaec2083794aa.png)

在一個典型的 Angular 專案中，通常會有很多元件。每個元件都有自己的樣式表（CSS、SCSS、LESS 等）。Angular 開發人員可能經常需要在元件中包含全域性樣式檔案（特別是變數檔案），比如上圖的 `_variables.scss`.

在 `hello.component.scss` 裡需要匯入全域性 scss 樣式，需要向下面這樣反覆使用 `..` 這種`相對路徑`語法來向上回溯：

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

h1 {
    color: $brand-color;
}
```
這種相對路徑語法非常容易出錯。

如果你的專案是使用 Angular CLI 生成的，你可以在 .angular.cli.json 檔案中新增一個 stylePreprocessorOptions > includePaths 的配置。這個配置允許你新增額外的基礎路徑，用於檢查匯入。它告訴 Angular CLI 在處理每個元件樣式檔案之前，在這些路徑中查詢樣式檔案。

例如，在我們的情況下，讓我們將 ./stylings 新增到路徑中。由於該配置接受一個陣列，你可以新增多個路徑。

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

現在我們可以對 component 的 scss 檔案進行重構：

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

h1 {
    color: $brand-color;
}
```

![](https://img-blog.csdnimg.cn/img_convert/ed07dfc7be25a641f97c063f95a5f060.png)

在 Angular 專案中，angular.json 檔案是一個重要的配置檔案，它包含了專案的各種後設資料和配置資訊。其中，stylePreprocessorOptions 欄位用於配置樣式處理器選項。

stylePreprocessorOptions 欄位允許你設定 Sass/Less 等 CSS 前處理器的選項。這些選項可以包括全域性變數、混合（mixins）等。透過在 angular.json 檔案中配置 stylePreprocessorOptions 欄位，你可以將這些選項應用到整個專案中，而不需要在每個元件中都單獨設定。

一個常見的用例是透過 stylePreprocessorOptions > includePaths 配置選項，將全域性的樣式檔案路徑新增到 Angular CLI 的編譯上下文中。這樣，在編譯元件時，就可以直接引用全域性樣式檔案中定義的變數和混合。這種用法稱之為 [shortcut](https://www.digitalocean.com/community/tutorials/angular-shortcut-to-importing-styles-files-in-components)。

總之，stylePreprocessorOptions 欄位的作用是允許你在 Angular 專案中使用前處理器，並提供了一些選項來配置前處理器的行為。

使用 Angular Shortcut 匯入 style 檔案

相關文章