使用 Angular CLI 新建一個 Angular 專案：

ng new my-sassy-app --style=scss

建立如下的 scss 檔案：

styles.scss 是我們使用的主要 scss 檔案，裡面匯入了以下劃線開頭的 _variables.scss 和 _mixins.scss:

// src/sass/styles.scss

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

最後在 angular.json 裡指定這個 styles.scss 檔案即可：

"styles": [
  "sass/styles.scss"
],

現在我們有了新的 _variables.scss 和 _mixins.scss 檔案，我們希望在我們其他的 Angular Component 中使用它們。在其他專案中，您可能習慣於在任意位置訪問這些 scss 檔案裡定義的 Sass 變數。

在 Angular CLI 中，所有元件都是自包含的，它們的 Sass 檔案也是如此。 為了在元件的 Sass 檔案中使用 _variables.scss 中定義的變數，您需要匯入 _variables.scss 檔案。

一種方法是使用元件的相對路徑 @import，比如 ../../ 這種寫法。如果您有許多巢狀資料夾或最終需要移動這些 scss 檔案，這或許不是一個好辦法——可讀性差，並且容易出錯。

一個好辦法是使用 alias 別名語法，用特殊符號波浪號代表：~. 在英語裡 ～ 的單詞是 tilde.

// src/app/app.component.scss

@import '~sass/variables';

// now we can use those variables!
 

波浪號 (~) 將告訴 Sass 檢視 src/ 資料夾，它是匯入 Sass 檔案的快捷方式(short cut).

Angular 專案中匯入 node_modules 資料夾下檔案的一些技巧

我們通過一個實際的例子來講解。假設我們引入了一個依賴 `bootstrap-sass：

npm install bootstrap-sass --save

這個 npm 包具有一些 scss 檔案：

我們可以更新 angular.json, 引入 node_modules 資料夾：

{
	...
	"apps": [{
		"root": "src",
		...
		"stylePreprocessorOptions": {
			"includePaths": [
			  ".",
			  "./stylings",
			  "../node_modules/bootstrap-sass/assets/stylesheets"
			]
		}
		
	}]
}
 

然後，在 Component 的 style 檔案裡，就可以使用相對路徑，來匯入這些 node_modules 資料夾下的 scss 檔案：

// hello.component.scss
@import "variables";
@import "stylings2/variables"; 
@impoer "bootstrap/variables";

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