📜  如何在angular 7中使用SCSS mixins?

📅  最后修改于: 2021-05-25 11:28:03             🧑  作者: Mango

使用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