在 Angular CLI 中使用 Sass

笔记首页 >> 教程系列 >> 在 Angular CLI 中使用 Sass

在一个项目中，你通常要做的第一件事就是引入Sass来简化CSS 的工作。

Angular CLI 主页

使用Angular CLI 时，默认样式表具有.css扩展名。

<div class=”notification is-info mb-md”>相关视频课程：<a href=”https://scotch.io/courses/working-with-the-angular-cli”>使用 Angular CLI< /a></div>

让我们探索如何轻松地将 Sass 引入我们的 Angular CLI 项目。

Sass 主页

如果您想快速了解 Angular CLI，请查看官方文档和我们的使用 Angular CLI 实现更快的 Angular v2+ 项目。

使用 Sass 启动 Angular CLI 项目

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

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

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

您还可以--style使用以下内容设置标志：

--style=scss
--style=sass
--style=less

将当前应用程序转换为 Sass

如果您已经使用默认.css文件创建了 Angular CLI 应用程序，则需要做更多的工作来转换它。您可以使用以下命令告诉 Angular 开始处理 Sass 文件：

ng set defaults.styleExt scss

这将继续并告诉 Angular CLI 开始处理.scss文件。如果您想深入了解此命令的作用，请查看 Angular CLI 配置文件：.angular-cli.json.

您将在文件底部找到新的配置行：

"defaults": {
  "styleExt": "scss",
  "component": {
  }
}

将 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.

// src/sass/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 7-1 模式。

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

将 Sass 文件导入 Angular 组件

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

在 Angular CLI 中，所有组件都是自包含的，它们的 Sass 文件也是如此。为了在组件的 Sass 文件中使用变量，您需要导入该_variables.scss文件。

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

CLI 提供了一种使用~.

无论我们在哪个组件 Sass 文件中，我们都可以像这样进行导入：

// src/app/app.component.scss

@import '~sass/variables';

// now we can use those variables!

波浪号 ( ~) 将告诉 Sass 查看src/文件夹，并且是导入 Sass 文件的快捷方式。

Sass 包含路径

除了使用之外~，我们还可以includePaths在使用 CLI 时指定配置。要告诉 Sass 查看某些文件夹，请在设置旁边.angular-cli.json的app对象中添加喜欢的配置行styles。

<div class=”notification is-info”>这是在 Angular CLI 应用程序中使用 Sass 文件的推荐方式。最好更明确地说明我们的文件来自哪里。我们可以用stylePreprocessorOptions.includePaths.</div>

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

使用 Bootstrap Sass 文件

我们需要经常做的另一个场景是导入第三方库及其 Sass 文件。

我们将引入Bootstrap，看看如何将 Sass 文件导入到我们的项目中。这很好，因为我们可以挑选我们想要使用的 Bootstrap 的哪些部分。我们还可以导入 Bootstrap 混合并在我们自己的项目中使用它们。

要让我们开始，请安装引导程序：

npm install --save bootstrap

注意：我们使用 4.0 测试版是因为 4.0 是用 Sass 构建的并提供了正确的.scss文件。

添加 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 文件

让我们减少在我们的应用程序中使用的 CSS 规则的数量。让我们看看Bootstrap 使用的所有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文件中，让我们只导入我们需要的 Bootstrap 文件。就像我们src使用波浪号 ( ~)从文件夹中导入 Sass 文件一样，波浪号也会查看node_modules文件夹。

虽然我们可以使用波浪号，因为我们已经在我们include_paths的stylePreprocessorOptions部分添加了 Bootstrap .angular-cli.json：

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

我们可以执行以下操作以仅获取 Bootstrap 基础工具：

// src/sass/styles.scss

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

结论

波浪号 ( ~) 和添加路径的能力stylePreprocessorOptions.includePaths使得在 Angular CLI 中导入 Sass 文件变得非常容易！希望这个快速提示对您的 Angular 之旅有所帮助。谢谢阅读。

虽然~在快速情况下很容易使用，但我建议使用该includePaths方法明确文件所在的确切文件夹.scss。

觉得文章有用？

点个广告表达一下你的爱意吧！