[样式设置]|[样式设置] 使用sass格式的方式 [样式设置]使用sass格式的方式

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

【[样式设置]|[样式设置] 使用sass格式的方式】原文地址：