我的Angular项目中没有加载CoreUI样式吗？

如何解决我的Angular项目中没有加载CoreUI样式吗？

我正在尝试从此website获取入门模板html代码，以使其在Angular中工作。

我创建了一个新项目，分别运行$ git clone https://github.com/coreui/coreui-angular.git，npm install @angular/coreui，npm install coreui，npm install bootstrap和npm install jquery（我想我需要的是coreui，但是没有用，所以我也开始安装其他东西。
在终端中运行一些命令以下载所有我认为可能需要使此代码正常工作的东西之后，我在index.html中的<head></head>标签之间添加了一行代码：>

<link rel="stylesheet" href="https://unpkg.com/@coreui/coreui/dist/css/coreui.min.css">

由于这并没有使网站注册样式，因此我后来也尝试了该样式

<link rel="stylesheet" href="https://unpkg.com/browse/@coreui/coreui@2.1.16/dist/css/coreui.min.css">

ng serve，npm start和yarn start不会像我期望的那样创建网站。它没有任何样式。我一直在试图弄清为什么Coreui样式没有加载，我希望获得帮助。与其看起来像coreui website中的侧边栏一样，它看起来像是页面上带有链接的无组织的文本。

这是我为npm outdated所获得的：

Package                             Current    Wanted   Latest  Location
@angular/animations                 10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/common                     10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/compiler                   10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/compiler-cli               10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/core                       10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/forms                      10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/platform-browser           10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/platform-browser-dynamic   10.0.11   10.0.12  10.0.12  ng-tutorial
@angular/router                     10.0.11   10.0.12  10.0.12  ng-tutorial
@types/node                        12.12.54  12.12.54   14.6.0  ng-tutorial
jasmine-core                          3.5.0     3.5.0    3.6.0  ng-tutorial
karma                                 5.0.9     5.0.9    5.1.1  ng-tutorial
karma-jasmine                         3.3.1     3.3.1    4.0.1  ng-tutorial
rxjs                                  6.5.5     6.5.5    6.6.2  ng-tutorial
ts-node                               8.3.0     8.3.0    9.0.0  ng-tutorial
typescript                            3.9.7     3.9.7    4.0.2  ng-tutorial
zone.js                              0.10.3    0.10.3   0.11.1  ng-tutorial

从ng version获得的有关系统的一些信息：

Angular CLI: 10.0.7
Node: 14.8.0
OS: darwin x64

Angular: 10.0.11
... animations,common,compiler,compiler-cli,core,forms
... platform-browser,platform-browser-dynamic,router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.7
@angular-devkit/build-angular     0.1000.7
@angular-devkit/build-optimizer   0.1000.7
@angular-devkit/build-webpack     0.1000.7
@angular-devkit/core              10.0.7
@angular-devkit/schematics        10.0.7
@angular/cli                      10.0.7
@ngtools/webpack                  10.0.7
@schematics/angular               10.0.7
@schematics/update                0.1000.7
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

让我知道您是否对如何使coreui样式在我的有角度的项目中工作有任何想法。非常感谢。

解决方法

我相信您可以通过将所需的样式导入全局样式文件或其他可能需要的样式来解决您的问题！-

这可以通过在src / styles.css下的全局样式表的开头使用简单的CSS导入来完成：

@import url("https://unpkg.com/@coreui/coreui/dist/css/coreui.min.css");

此外，请不要忘记将以下脚本添加到index.html文件正文的末尾：请注意，脚本的顺序很重要，因为它们都是CoreUI的依赖项。

<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/browse/@coreui/coreui@2.1.16/dist/js/coreui.min.js"></script>

祝你好运！

我的Angular项目中没有加载CoreUI样式吗？

如何解决我的Angular项目中没有加载CoreUI样式吗？

解决方法

相关推荐