[样式设置] 使用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';

原文地址：

• Using Sass with the Angular CLI