如何在angular 7中使用SCSS混合器

当使用Angular CLI时，默认样式表的扩展名为.css。

用Sass开始一个Angular CLI项目

通常，当我们运行ng new my-app时，我们的app会有.css文件。要让CLI生成.scss文件（或.sass/.less）是一件很容易的事情。

用Sass创建一个新项目，内容如下。

ng new my-sassy-app --style=scss

将当前的应用程序转换为Sass：

如果你已经用默认的.css文件创建了你的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到主样式.scss中。

@import './variables';
@import './mixins';

最后一步是更新我们的.angular-cli.json配置，使用这个新的src/sass/styles.scss，而不是src/styles.scss。在我们的.angular-cli.json文件中，只需修改以下一行，以指向正确的style.scss。

"styles": [
  "sass/styles.scss"
],

注意：将我们的Sass分离到自己的文件夹中，因为它允许我们创建一个更强大的Sass基础。

现在，当我们启动我们的应用程序时，这些新的Sass文件将被使用。

将Sass文件导入到Angular组件中：

我们有新的_variables.scss和_mixins.scss文件，我们可能想在我们的组件中使用。在其他项目中，你可能习惯于在所有位置访问你的Sass变量，因为你的Sass是由一个任务运行器编译的。

在Angular CLI中，所有的组件都是独立的，它们的Sass文件也是独立的。为了从组件的Sass文件中使用一个变量，你需要导入variables.scss文件。

一种方法是用组件的相对路径来@导入。如果你有许多嵌套的文件夹或最终移动文件，这可能无法扩展。

无论我们在哪个组件的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的混合元素，并在我们自己的项目中使用它们。

为了让我们开始，安装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变量/混合元素。

让我们看看如何使用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文件一样，使用tilde(~)，tilde也会查看node_modules文件夹。

虽然我们可以使用tilde，因为我们已经在.angular-cli.json的stylePreprocessorOptions部分将Bootstrap加入到我们的include_paths。

"styles": [
  "styles.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "../node_modules/bootstrap/scss"
  ]
},

我们可以做以下工作，只获得Bootstrap的基本工具。

@import 
  'functions',
  'variables',
  'mixins',
  'print',
  'reboot',
  'type';