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

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

建立如下的 scss 檔案：

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

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

```css
// src/sass/styles.scss

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

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

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

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

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

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

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

```css
// 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 檔案：
![](https://img-blog.csdnimg.cn/img_convert/7bc7580b8810a303620c8ce545368115.png)

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

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

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

```css
// 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;
}
```

Angular 專案裡使用 scss 檔案的一些技巧

相關文章