作为Angular应用的一部分，在HTML中引用CSS

我正在使用ASP.NET WebAPI 2创建一个Anuglar 2应用程序来获取数据。我使用的是HTML页面，而不是ASP.NET CSHTML页面来渲染屏幕。我的应用程序项目中有两个CSS文件，它们是Bootstrap.css和site.css。我有两个CSS文件，这些文件被配置为捆绑在bundle.config文件中。请参阅下面的代码

   bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));

MVC布局具有以下代码，该代码负责在MVC

中实现CSS文件

 @Styles.Render("~/Content/css")

然而，这并不照顾我为Angular构建的HTML页面。因此，我在index.html页面中对其进行了明确的引用，如下所示

<!DOCTYPE html>
<html>
<head>

    <base href="/">
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Site.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
    <link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
    <!--<link rel="stylesheet" href="styles.css">-->
    <!--<script src="node_modules/bootstrap/dist/css/bootstrap.min.css"></script>-->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script>
</head>
<body>
    <my-app></my-app>

</body>
</html>

我只想验证我的实现是否正确。

如果您不使用本机.cshtml页面，请不要使用本机捆绑功能。如果您的项目非常新，只需转到Angular-CLI，它将为您处理捆绑。

否则，使用Gulp（或您喜欢的任务跑步者）进行。

相关内容

最新更新

热门标签：