Question

我正在使用asp.net webapi 2创建一个anuglar 2应用程序来获取数据。我正在使用html页面而不是Asp.net cshtml页面来呈现屏幕。我的应用程序项目中有两个css文件，即Bootstrap.css和Site.css。我有两个配置为捆绑在bundle.config文件中的css文件。请参阅以下代码

   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>

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

Answer 1

如果您不使用原生.cshtml页面，请不要使用原生捆绑功能。如果你的项目很新，只需转到Angular-cli即可为你处理捆绑。

否则，请使用gulp（或您喜爱的任务跑步者）。

在html中引用css作为角度应用程序的一部分

1 个答案: