If you’re a lover of SCSS, you’ll definitely want to make sure to use it in your Angular applications. Luckily the Angular CLI does all the setup for you!

如果您是SCSS的爱好者，则肯定要确保在Angular应用程序中使用它。 幸运的是，Angular CLI为您完成了所有设置！

Let’s first walk through the file changes that the Angular CLI handles for us and how you can modify existing projects to switch over to SCSS for styling. I’ll then go over how I like to set up my SCSS files and folder structure when working on Angular projects.

首先，让我们逐步了解一下Angular CLI为我们处理的文件更改，以及如何修改现有项目以切换到SCSS进行样式设置。 然后，我将介绍在Angular项目上工作时如何设置SCSS文件和文件夹结构。

Let’s get into it!

让我们开始吧！

使用Angular CLI的新项目设置 (New Project Setup Using Angular CLI)

When creating a new Angular app using the ng new app-name command, the CLI will ask you “Which stylesheet format would you like to use?” — select SCSS.

使用ng new app-name命令创建新的Angular应用ng new app-name ，CLI会询问您“ 您要使用哪种样式表格式？ ”-选择SCSS。

When choosing this option when creating a new project, the main things the CLI does is the following:

在创建新项目时选择此选项时，CLI的主要工作如下：

1. Adds the `src/styles.scss reference to the angular.json build/options/styles section

   在angular.json build/options/styles部分添加`src/styles.scss引用

2. Creates a styles.scss file and adds it to your src folder

   创建一个styles.scss文件并将其添加到您的src文件夹中

The CLI will configure the testing files and references as well, but we won’t go into those here.

CLI还将配置测试文件和参考，但是在此不再赘述。

💁🏼 Tip: Run ng — version in your terminal to check what @angular/cli version you are running, and update to the latest using npm i -g @angular/cli@latest.

💁🏼提示：在终端中运行ng — version ，以检查您正在运行的@ angular / cli版本，并使用npm i -g @angular/cli@latest更新至npm i -g @angular/cli@latest 。

将现有的Angular项目切换到SCSS (Switching Existing Angular Project to SCSS)

If you ever need to switch to the SCSS stylesheet format in an existing project, having the two items above should be all you need to get going!

如果您需要在现有项目中切换到SCSS样式表格式，则只需具备以上两项即可！

Updating CLI Config

更新CLI配置

The other thing you need to do is update your CLI configuration to create SCSS files instead of CSS files when you create new components. There are two ways to do this — using the CLI command or adding the reference manually. To use the command type the following into your terminal:

您需要做的另一件事是在创建新组件时更新CLI配置以创建SCSS文件而不是CSS文件。 有两种方法可以执行此操作-使用CLI命令或手动添加参考。 要使用该命令，请在终端中输入以下内容：

ng config schematics.@schematics/angular:component.styleext scss

ng config schematics.@schematics/angular:component.styleext scss

💁🏼 Tip: Sometimes this command modifies the `angular.json` in the wrong place. Make sure it is modified in the top section of your file under your project (usually line 8 or so if you don’t have many configuration changes).

提示：有时此命令在错误的位置修改了“ angular.json”。 确保在项目下文件的顶部对它进行了修改(如果没有太多配置更改，则通常在第8行左右)。

To make the change manually add the following schematics reference into your `angular.json` file:

要手动进行更改，请在您的`angular.json`文件中添加以下原理图参考：

"schematics":{
   "@schematics/angular:component": {
      "style": "scss" }
},

"schematics":{"@schematics/angular:component":{"style": "scss"}},

"schematics":{"@schematics/angular:component":{"style": "scss"}},

Using the SCSS-Scaffold NPM Package

使用SCSS-Scaffold NPM软件包

A while back ago I created an Angular Schematic (you can read more about it here) that adds of all of the SCSS folder structure for you with the easy command npm add scss-scaffold, so you don’t have to 😊

前一阵子我创建了一个Angular Schematic(您可以在此处了解更多信息)，使用简单的命令npm add scss-scaffold为您添加了所有SCSS文件夹结构，因此您不必😊

You can check it out the post I wrote about it here:

您可以在这里查看我写过的帖子：

SCSS结构 (SCSS Structure)

Global Styling Philosophy

全球风格哲学

You certainly can keep things simply by having one global `styles.scss` SCSS file, and you can also use styling on a component-by-component basis.

当然，只要拥有一个全局的styles.scss SCSS文件，就可以保留所有内容，并且还可以逐个组件地使用样式。

I like to keep my styles as global as possible avoiding component styling as I find that things can get very messy very quickly, especially when working on teams with multiple developers.

我喜欢将样式保持尽可能全球性，以避免组件样式化，因为我发现事情会变得非常混乱，尤其是在与多个开发人员一起工作的团队中。

Having global styles keeps everyone using the same structure and system, and encourages discussions about patterns and use cases.

具有全局样式可以使每个人都使用相同的结构和系统，并鼓励有关模式和用例的讨论。

SCSS Folder Structure

SCSS文件夹结构

Once you have your Angular project ready and set up to use SCSS, it’s time to move some things around.

准备好Angular项目并设置为使用SCSS之后，就该移动一些东西了。

To get things started:

开始工作：

1. Create a folder in your src project folder called styles.

   在src项目文件夹中创建一个名为styles文件夹。

2. Move your styles.scss file into the newly created styles folder.

   将您的styles.scss文件移动到新创建的styles文件夹中。

3. Update your angular.json file to point to the new location of your styles.scss file

   更新您的angular.json文件，点到你的新位置styles.scss文件

Now, it’s time to build out our folder scaffold. I like to follow something similar to the 7–1 Pattern but modify some of the names.

现在，该构建我们的文件夹支架了。 我喜欢遵循类似于7-1模式的方法，但是修改了一些名称。

Below is an example of how I lay out the style folders.

以下是如何布置样式文件夹的示例。

Base Folder

基本文件夹

My base folder contains global styles which has some general layout items, a few general default overrides (think normalize.css-type styles), and my base font size so I can use rems consistently.

我的基本文件夹包含全局样式，其中包含一些常规布局项目，一些常规默认替代(请考虑normalize.css类型的样式)以及我的基本字体大小，以便可以一致地使用rems。

The other thing my base folder contains is a typography stylesheet for all things fonts. This not only includes headings and general fonts, but also links and other custom font classes as needed.

我的基本文件夹包含的另一件事是所有字体的排版样式表。 这不仅包括标题和常规字体，还包括链接和其他所需的自定义字体类。

Pages

页数

I try to use pages sparingly but this is where I put non-standard styles that apply only to a certain page. I often look for patterns and systems to apply globally to re-usable elements, but sometimes when there are some custom considerations, this is where I’ll place them.

我尝试少量使用页面，但这是我放置仅适用于特定页面的非标准样式的地方。 我经常寻找在全球范围内适用于可重用元素的模式和系统，但是有时当有一些自定义注意事项时，这就是放置它们的地方。

Modules (or Components)

模块(或组件)

The Modules (or commonly known as Components), keeps all of my reusable component styles. This includes things like the header and footer, buttons, labels, navigation, cards, or any other elements that you are using throughout your project in several places.

模块(或通常称为组件)保留了我所有可重用的组件样式。 其中包括在整个项目中的多个位置使用的页眉和页脚，按钮，标签，导航，卡片或任何其他元素。

Helpers

帮手

Helpers is where some of the most important things are. The first thing you’ll need is your constants. This stylesheet contains all of the variables for your colors, font-families, z-indexes, and some default sizing. For example, I like to add $border-radius-large and $border-radius-small variables to help keep that aspect consistent throughout the app.

一些最重要的地方是助手。 您需要的第一件事是常量。 此样式表包含颜色，字体系列，z索引和一些默认大小的所有变量。 例如，我喜欢添加$border-radius-large和$border-radius-small变量，以帮助在整个应用程序中保持该方面的一致性。

You’ll also want to add a mixin stylesheet for some custom-made reusable elements. Mixins allow you to take in arguments — I like to use them for shapes and also for font groups (such as defining a base “title font” style that I can then build upon in my other stylesheets.

您还需要为一些定制的可重用元素添加一个mixin样式表。 Mixins允许您接受参数-我喜欢将它们用于形状以及字体组(例如定义基本的“标题字体”样式，然后可以在其他样式表中建立这些样式)。

Vendors (Optional)

供应商(可选)

Lastly, you might want to include a vendor folder if you’re incorporating a third party library like Bootstrap or Normalize.css. Sometimes it helps to keep any vendor-specific configuration or override styles in this vendor folder. You can also import only those specific stylesheets (such as Bootstrap base tools) and keep that here.

最后，如果要合并诸如Bootstrap或Normalize.css之类的第三方库，则可能要包括一个供应商文件夹。 有时，它有助于保留任何特定于供应商的配置或覆盖此供应商文件夹中的样式。 您也可以仅导入那些特定的样式表(例如Bootstrap基本工具)，并将其保留在此处。

💁🏼 Tip: When installing a vendor library, say using NPM, make sure you update your angular.json file to reference it’s source location such as:

💁🏼提示：安装供应商库时，例如使用NPM，请确保更新您的angular.json文件以引用其源位置，例如：

"styles": [

"styles": [

"styles": [
   "../node_modules/bootstrap/dist/scss/bootstrap.scss",
   "styles/styles.scss"
],

Print Stylesheet (Optional)

打印样式表(可选)

The other file I sometimes like to include is the print.scss stylesheet that covers any custom print styling of your site. This is especially helpful on very animated or colorful websites that contain technical documentation — you might want to include styles that simplify things, and possibly omit elements for printing for easier content digesting. You could easily put this in your base folder, but I like keeping it separate as it often modifies content significantly different than intended for the overall application when used in its natural format (digital device).

我有时还想包括的另一个文件是print.scss样式表，该样式表涵盖了您网站的任何自定义打印样式。 这在包含技术文档的动画或色彩缤纷的网站上特别有用-您可能希望包括简化样式的样式，并可能省略打印元素以简化内容消化。 您可以轻松地将其放在基本文件夹中，但是我喜欢将其分开，因为当以自然格式(数字设备)使用时，它经常修改的内容与针对整个应用程序的内容大不相同。

SCSS Directory Files

SCSS目录文件

SCSS structure includes having a directory file (i.e. _base-dir.scss) in each folder that includes all of the individual stylesheets within that folder. Those directory files, then roll up into the ‘main’ styles.scss folder which helps keep things clean and organized, and easy to read. I like to set up my directory files to look something like this:

SCSS结构包括在每个文件夹中都有一个目录文件(即_base-dir.scss )，该目录文件包含该文件夹中的所有单个样式表。 然后将这些目录文件汇总到“主要” styles.scss文件夹中，该文件夹有助于使内容整洁，井井有条，并且易于阅读。 我喜欢将目录文件设置为如下所示：

The header helps me quickly know what I’m looking at — especially when I’m editing a lot of files. Below are the important pieces where you import the individual stylesheets within that folder, in this case, the base folder.

标头可帮助我快速了解正在查看的内容，尤其是在编辑大量文件时。 下面是重要的部分，您可以在其中导入该文件夹(在本例中为基本文件夹)中的各个样式表。

💁🏼 Tip: Make sure that you add your import to your directory file every time you create a new stylesheet inside of a folder.

💁🏼提示：确保每次在文件夹内创建新样式表时，都将导入添加到目录文件中。

SCSS Main File Roll-Up

SCSS主文件汇总

The last thing that you need is to roll-up all of those directory files into your main styles.scss file that is actually being read by your app (as we told it to in the angular.json file).

您需要做的最后一件事是将所有这些目录文件styles.scss到您的应用实际正在读取的主styles.scss文件中(如我们在angular.json文件中所述)。

This is what my styles.scss folder might look like:

这是我的styles.scss文件夹可能看起来像的样子：

💁🏼 Tip: Remember that the order of imports matters! If you’re using constants / variables that your other stylesheets reference, you’ll need to make sure that directory import is at the top being imported before the files that are using those variables.

💁🏼提示：请记住，进口顺序很重要！ 如果您正在使用其他样式表引用的常量/变量，则需要确保在使用这些变量的文件之前，目录导入在导入的顶部。

使用组件样式 (Using Component Styling)

If you do want to use component styling but still want to use some of the SCSS structure, you can simply import the specific stylesheet into your your-component.component.scss file using this format:

如果您确实想使用组件样式，但仍想使用某些SCSS结构，则可以使用以下格式将特定的样式表简单地导入到your-component.component.scss文件中：

@import ‘styles/variables’;

Note that you’ll have to update this path if you ever move this file or change its name.

请注意，如果移动此文件或更改其名称，则必须更新此路径。

摘要 (Summary)

That’s it! Once you have SCSS up and running and a nicely organized folder structure, it should help you be much more efficient and organized when it comes to maintaining your stylesheet / CSS code.

而已！ 一旦启动并运行了SCSS并组织了一个井井有条的文件夹结构，它就可以在维护样式表/ CSS代码时更加高效和井井有条。

Happy coding!

编码愉快！

事后📋 (After-Thoughts 📋)

Although the CLI has lots of configuration options — I find myself wishing there was a “no styles” flag (similar to the --skipTests=false flag that currently exists) when creating components. Since I structure all of my stylesheets independently in my styles folder, I don’t ever have the need for component based stylesheets.

尽管CLI有很多配置选项-创建组件时，我发现自己希望有一个“ no styles”标志(类似于当前存在的--skipTests=false标志)。 由于我将所有样式表独立地构建在样式文件夹中，因此不再需要基于组件的样式表。

Luckily, if it’s something you’re looking for there are flags for inline styling, external styling and changing your stylesheet preference configurations (as we saw above).

幸运的是，如果您正在寻找某种东西，则有用于内联样式，外部样式和更改样式表首选项配置的标志(如上所述)。

资源🧰 (Resources 🧰)

Here are some resources if you want to learn more about SCSS and the using SCSS with Angular and the CLI:

如果您想了解有关SCSS以及将SCSS与Angular和CLI结合使用的更多信息，请参见以下资源：

• https://sass-guidelin.es/#architecture

  https://sass-guidelin.es/#architecture

• https://sass-lang.com/styleguide/layout

  https://sass-lang.com/styleguide/layout

• https://scotch.io/tutorials/using-sass-with-the-angular-cli (outdated but helpful background info)

  https://scotch.io/tutorials/using-sass-with-the-angular-cli ( 过时但有用的背景信息 )

• https://angular.io/cli

  https://angular.io/cli