使用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导入：
我个人喜欢为项目变量和项目Mixins创建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中，就像在styles设置旁边的app对象中一样。
"styles": [
"styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"../node_modules/bootstrap/scss"
]
},
使用Bootstrap Sass文件：
我们经常需要做的另一种情况是导入第三方库及其Sass文件。
我们将引入Bootstrap，看看如何将Sass文件导入到我们的项目中。这很好，因为我们可以选择要使用的Bootstrap部分。我们还可以导入Bootstrap mixin并在我们自己的项目中使用它们。
要开始使用，请安装引导程序：
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变量/混合。
让我们看看如何使用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