用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';
原文地址：
