用Angular CLI設置樣式格式

默認樣式格式是 css， 使用 scss | sass 作為樣式

ng new my-project --style=scss

# 可選flags

--style=scss

--style=sass

--style=less

將已經存在的css樣式格式項目轉換為scss

告訴angular開始處理 scss | sass 文件

ng set defaults.styleExt scss

這個命令行將更改 angular-cli.json 配置文件

"defaults": {

"styleExt": "scss",

"component": {}

}

這樣設置之后，angular就可以開始處理sass格式的文件了，但是原來的 css 文件需要手動的轉換為 scss | sass格式

使用Sass Imports

引入文件， 假設部分目錄為

|- src/

|- sass/

|- _variables.scss

|- _mixins.scss

|- styles.scss

假如 styles.scss中需要引入其余2個文件

@import './variables';

@import './mixins';

然后在angular-cli.json 中設置 src/sass/styles.scss 的路徑,取代 src/styles.scss

"styles": [

"sass/styles.scss"

]

Angular組件中引入Sass文件

我們可以使用相對路徑來引入，但是如果嵌套深了就容易出問題，我們可以使用下面方式引入

// src/app/app.component.scss

@import '~sass/variables'

// 現在我們就可以使用variables中定義的變量了

~ 將告訴Sass在 src/ 目錄下尋找該文件

Sass包含路徑

除了可以使用 ~，我們也可以在 angular-cli.json 中設置 includePaths 配置，用來告訴Sass在指定的文件夾中尋找。

"styles": [

"styles.scss"

],

"stylePreprocessorOptions": {

"includePaths": [

"my-path"

]

},

使用第三方樣式

假設我們使用bootstrap的樣式，angular-cli.json 中

"styles": [

"../node_modules/bootstrap/dist/css/bootstrap.css",

"sass/styles.scss"

],

../node_modules 中的 ..表示 src/的上一層路徑

使用bootstrap的 sass 文件 而不是css文件的方法

先來看一下bootStrap(V4.0)中有哪些sass文件

/*!

* Bootstrap v4.0.0-beta (https://getbootstrap.com)

* Copyright 2011-2017 The Bootstrap Authors

* Copyright 2011-2017 Twitter, Inc.

* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

*/

@import "functions";

@import "variables";

@import "mixins";

@import "print";

@import "reboot";

@import "type";

@import "images";

@import "code";

@import "grid";

@import "tables";

@import "forms";

@import "buttons";

@import "transitions";

@import "dropdown";

@import "button-group";

@import "input-group";

@import "custom-forms";

@import "nav";

@import "navbar";

@import "card";

@import "breadcrumb";

@import "pagination";

@import "badge";

@import "jumbotron";

@import "alert";

@import "progress";

@import "media";

@import "list-group";

@import "close";

@import "modal";

@import "tooltip";

@import "popover";

@import "carousel";

@import "utilities";

在 src/sass/styles.scss 中我們可以引入自己需要的文件, 使用 ~ 將查詢 node_modules 路徑下

// src/sass/styles.scss 文件

@import

'~bootstrap/scss/functions',

'~bootstrap/scss/variables',

'~bootstrap/scss/mixins',

'~bootstrap/scss/print',

'~bootstrap/scss/reboot'

'~bootstrap/scss/type';

總結

以上是生活随笔為你收集整理的html怎么引入sass样式,[样式设置] 使用sass格式的方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。