用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';