Angular 6 中的 multi .styles.css 中出现错误

CSS

Angular 6 中的 multi ./styles.CSS 中出现错误

在使用 Angular 6 进行开发过程中，我们经常会遇到一些样式相关的问题。其中一个常见的问题是在项目的根目录中的 styles.CSS 文件中使用了 multi 标记，却出现了错误。本文将介绍这个问题的原因，并提供解决方案。

首先，让我们来看一下在 Angular 6 项目中的根目录中的 styles.CSS 文件的内容：

CSS
/* styles.CSS */
@import '~bootstrap/dist/CSS/bootstrap.min.CSS';
@import '~font-awesome/CSS/font-awesome.min.CSS';
@import url('Googleapis.com/CSS?family=Roboto:300,400,500'">https://fonts.Googleapis.com/CSS?family=Roboto:300,400,500'</a>);
@import url('https://fonts.Googleapis.com/icon?family=Material+Icons');
.multi {
  color: red;
}

在上面的例子中，我们使用了 multi 标记来引入外部样式文件。multi 标记可以用来同时引入多个样式文件，这在 Angular 6 中非常方便。

然而，有时候我们会遇到以下错误提示：

ERROR in multi ./styles.CSS
Module not found: Error: Can't resolve './styles.CSS' in 'C:\path\to\project'

这个错误提示表明在编译过程中无法找到 styles.CSS 文件。那么，为什么会出现这个错误呢？

原因是 Angular 6 默认只会处理以 .ts 后缀结尾的文件。而 styles.CSS 文件并不是一个 typescript 文件，因此在编译时会被忽略掉。因此，我们需要手动告诉 Angular 6 在编译时也处理 styles.CSS 文件。

解决这个问题的方法非常简单。我们只需要在项目的根目录中的 angular.JSon 文件中添加以下代码：

JSon
"styles": [
  "src/styles.CSS"
],

在上面的例子中，我们将 styles.CSS 文件添加到了 "styles" 数组中。这样，Angular 6 在编译时就会处理 styles.CSS 文件了。

解决 multi ./styles.CSS 错误的方法

通过上面的解释，我们可以看出解决 multi ./styles.CSS 错误的方法非常简单。只需要在 angular.JSon 文件中添加 styles.CSS 文件的路径，就可以解决这个问题了。

在 Angular 6 中，使用 multi 标记来引入外部样式文件是一种方便的方式。然而，有时候会出现 multi ./styles.CSS 错误，这是因为 Angular 6 默认只会处理以 .ts 后缀结尾的文件。为了解决这个问题，我们需要手动告诉 Angular 6 在编译时也处理 styles.CSS 文件。通过在 angular.JSon 文件中添加 styles.CSS 文件的路径，我们可以轻松地解决这个问题。

希望本文对你在解决 Angular 6 中的 multi ./styles.CSS 错误问题时有所帮助！