使用 Angular CLI 时，默认样式表具有 .css 扩展名。
使用 Sass 启动 Angular CLI 项目
通常，当我们运行 ng new my-app 时，我们的应用程序会有.css files 。让 CLI 生成.scss files (或 .sass/.less)是一件容易的事情。
使用 Sass 创建一个新项目，内容如下：
ng new my-sassy-app --style=scss将当前应用程序转换为 Sass：
.css files创建了 Angular CLI 应用程序，则需要做更多的工作来转换它。您可以使用以下命令告诉 Angular 开始处理 Sass 文件：
ng set defaults.styleExt scss这将继续并告诉 Angular CLI 开始处理 .scss 文件。如果您想深入了解此命令的作用，请查看 Angular CLI 配置文件： .angular-cli.json 。
您将在文件底部找到新的配置行：
"defaults": {
"styleExt": "scss",
"component": {
}
}sd将 CSS 文件更改为 Sass：
Angular CLI 现在将开始处理 Sass 文件。但是，它不会完成将现有 .css 文件转换为 .scss 文件的过程。您必须手动进行转换。
使用 Sass 导入：
我个人喜欢为项目变量和项目混合创建 Sass 文件。这样，我们可以快速轻松地引入我们需要的任何变量/混合。
例如，让我们创建一个全新的 CLI 应用程序：
ng new my-sassy-app --style=scss接下来，创建以下文件：
|- src/
|- sass/
|- _variables.scss
|- _mixins.scss
|- styles.scss
要开始使用这些新的 Sass 文件，我们将把_variables.scss和_mixins.scss导入到主要的 styles.scss 中。
@import './variables';
@import './mixins';最后一步是更新我们的.angular-cli.json配置以使用这个新的 src/sass/styles.scss 而不是 src/styles.scss。在我们的.angular-cli.json文件中，只需更改以下行以指向正确的styles.scss 。
"styles": [
"sass/styles.scss"
],
注意：将我们的 Sass 分离到它自己的文件夹中，因为它允许我们创建一个更强大的 Sass 基础。
现在，当我们启动我们的应用程序时，将使用这些新的 Sass 文件！
将 Sass 文件导入 Angular 组件：
我们有新的 _variables.scss和_mixins.scss文件，我们可能希望在我们的组件中使用它们。在其他项目中，您可能习惯于在所有位置访问您的 Sass 变量，因为您的 Sass 是由任务运行程序编译的。
在 Angular CLI 中，所有组件都是自包含的，它们的 Sass 文件也是如此。为了在组件的 Sass 文件中使用变量，您需要导入_variables.scss文件。
一种方法是使用组件的相对路径@import。如果您有许多嵌套文件夹或最终移动文件，这可能无法扩展。
无论我们在哪个组件 Sass 文件中，我们都可以像这样进行导入：
// src/app/app.component.scss
@import '~sass/variables';
// now we can use those variables!
波浪号 (~) 将告诉 Sass 查看 src/ 文件夹，并且是导入 Sass 文件的快捷方式。
Sass 包含路径：
除了使用 ~ 之外，我们还可以在使用 CLI 时指定 includePaths 配置。要告诉 Sass 查看某些文件夹，请将配置行添加到 .angular-cli.json 中，就像在样式设置旁边的 app 对象中一样。
"styles": [
"styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"../node_modules/bootstrap/scss"
]
},
使用 Bootstrap Sass 文件：
我们需要经常做的另一个场景是导入第三方库及其 Sass 文件。
我们将引入 Bootstrap，看看如何将 Sass 文件导入到我们的项目中。这很好，因为我们可以挑选我们想要使用的 Bootstrap 的哪些部分。我们还可以导入 Bootstrap 混合并在我们自己的项目中使用它们。
要让我们开始，请安装引导程序：
npm install --save bootstrap添加 Bootstrap CSS 文件
现在我们有了 Bootstrap，让我们看看如何包含基本的 CSS 文件。通过将 bootstrap.css 文件添加到我们的 .angular-cli.json 配置，这是一个简单的过程：
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"sass/styles.scss"
],
注意：我们使用..是因为 CLI 从 src/ 文件夹中开始查找。我们必须上一个文件夹才能到达 node_modules 文件夹。
虽然我们可以通过这种方式导入 Bootstrap CSS，但这并不能让我们只导入 Bootstrap 的部分或使用 Bootstrap 提供的 Sass 变量/mixin。
让我们看看如何使用 Bootstrap Sass 文件而不是 CSS 文件。
添加 Bootstrap Sass 文件
@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 文件中，让我们只导入我们需要的 Bootstrap 文件。就像我们使用波浪号 (~) 从 src 文件夹导入 Sass 文件一样，波浪号也会查看 node_modules 文件夹。
虽然我们可以使用波浪号，因为我们已经在 .angular-cli.json 的 stylePreprocessorOptions 部分中将 Bootstrap 添加到我们的 include_paths 中：
"styles": [
"styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"../node_modules/bootstrap/scss"
]
},
我们可以执行以下操作以仅获取 Bootstrap 基础工具：
@import
'functions',
'variables',
'mixins',
'print',
'reboot',
'type';
参考： https://scotch.io/tutorials/using-sass-with-the-angular-cli