使用 Angular CLI 新建一個 Angular 項目：

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

創(chuàng)建如下的 scss 文件：

styles.scss 是我們使用的主要 scss 文件，里面導入了以下劃線開頭的 _variables.scss 和 _mixins.scss:

// src/sass/styles.scss

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

最后在 angular.json 里指定這個 styles.scss 文件即可：

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

現(xiàn)在我們有了新的 _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;
}

附：angular5 配置使用sass

1、利用npm工具安裝sass依賴和loader

  cnpm/npm install node-sass --save-dev
  cnpm/npm install sass-loader --save-dev

2、修改.angular-cli.json文件

"styles": [
    "styles.scss"
],
"defaults":{
    "styleExt": "scss",
    "component": {}
}

3、將項目中的styel.css改成 style.scss

4、新建的component項目會直接生成.scss文件

總結

到此這篇關于Angular項目中使用scss文件的一些技巧的文章就介紹到這了,更多相關Angular使用scss文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論