Angular 6 不应用 scss 样式

CSS

标题：禁用 Angular 6 中的 SCSS 样式的方法与案例代码

在Angular 6中，默认情况下，应用的样式是使用SCSS（Sassy CSS）语法编写的。然而，在某些情况下，您可能希望禁用SCSS样式，而仅使用普通的CSS。本文将介绍如何在Angular 6项目中禁用SCSS样式，并提供相应的案例代码。

首先，让我们了解一下为什么有时候禁用SCSS样式可能是有必要的。在一些项目中，可能存在与SCSS不兼容的其他样式表或者团队内部更倾向于使用普通CSS。在这种情况下，禁用SCSS样式是一个合理的选择。

要在Angular 6中禁用SCSS样式，您需要进行一些简单的配置。打开您的Angular项目，按照以下步骤操作。

禁用SCSS样式的步骤

1. 找到angular.JSon文件

在项目的根目录中，找到名为angular.JSon的文件。这是Angular项目的配置文件。

2. 定位到styles数组

在angular.JSon文件中，找到与您的应用相关的配置。通常，这位于architect -> build -> options -> styles数组内。

3. 删除或注释掉SCSS样式文件的引用

在styles数组中，您会看到一个或多个与SCSS样式文件相关的条目，它们通常以.sCSS为扩展名。删除或将这些条目注释掉，以禁用SCSS样式。

下面是一个简单的例子，假设您的angular.JSon文件如下：

JSon
"styles": [
  "src/styles.sCSS",
  "src/app/app.component.sCSS"
],

如果您想禁用app.component.sCSS中的SCSS样式，可以将其删除或注释掉：

JSon
"styles": [
  "src/styles.sCSS",
  // "src/app/app.component.sCSS"
],

重新构建项目

完成上述步骤后，保存angular.JSon文件并重新构建您的Angular项目。您可以使用以下命令：

bash
ng build

重新构建后，您的应用将不再应用被禁用的SCSS样式，而只使用普通的CSS样式。

通过这种简单的配置，您可以方便地禁用Angular 6中的SCSS样式，使项目更符合您的需求。