如何将自定义样式表和脚本添加到ASP.NET Core项目？

Question

首先，我说我已经看到了与此相关的StackOverflow问题，但是没有一个解决方案可以解决该问题。

我正在尝试将自定义样式表和JS脚本文件添加到新的ASP.NET Core解决方案中。

wwwroot中的css和JS文件确实可以正常工作，但是我也希望能够添加自己的文件。

我已经在项目中添加了一个Content文件夹，其中有一个CSS文件夹（Content文件夹> CSS文件夹> Site.css），试图通过_Layout.cshtml文件中的链接标记将其连接起来，但是没有成功。

我在上面提到的Content文件夹（Content文件夹> Scripts文件夹> CustomJS.js）中也有一个“ Scripts”文件夹，其中还有Javscript文件（CustomJS.js），但现在不确定如何将其连接起来AppStart文件夹中的BundleConfig文件消失了。

我在这里想念什么？

这是head标签顶部到底部的_Layout.cshtml文件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - JavascriptPractice</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        **<link rel="stylesheet" href="~/Content/CSS/Site.css" />**
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>

Answer 1

为了从wwwroot以外的目录提供脚本和CSS，您需要在请求管道中添加另一个静态文件处理程序。

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseStaticFiles();
    app.UseStaticFiles(new StaticFileOptions 
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Content")),
        RequestPath = "/Content"
    });
}

有关静态文件，请参见ASP.NET Core文档中的更多详细信息。

Answer 2

您可以尝试使用BuildBundlerMinifier

Install-Package BuildBundlerMinifier -Version 2.8.391

在您的Web项目中安装此软件包，然后在项目bundleconfig.json文件的根目录中创建。 在此文件内容示例中，如果不想在布局中更改jquery引用，则只能放置自定义js / css文件。

[
  {
    "outputFileName": "wwwroot/css/globalCss.min.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "node_modules/font-awesome/css/font-awesome.min.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/globalJs.min.js",
    "inputFiles": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js",
      "JS/site.js"
    ]
  },
  {
    "outputFileName": "wwwroot/js/pageJs.min.js",
    "inputFiles": [
      "node_modules/jquery-validation/dist/jquery.validate.js",
      "node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js"
    ]
  }

]

此JS / CSS文件是在项目的构建中创建的。 如果仅在js文件中进行更改，则可以清理/重建项目，以便正确地重新加载它们。 这是您在生成的输出中应该看到的内容：

Bundler: Begin processing bundleconfig.json
Minified wwwroot/css/globalCss.min.css
Minified wwwroot/js/globalJs.min.js
Minified wwwroot/js/pageJs.min.js
Bundler: Done processing bundleconfig.json

如何将自定义样式表和脚本添加到ASP.NET Core项目？

问题描述

2 个解决方案

解决方案1
0 2018-08-16 00:05:02

解决方案2
0 2018-08-16 06:06:34

如何将自定义样式表和脚本添加到ASP.NET Core项目？

问题描述

2 个解决方案

解决方案1 0 2018-08-16 00:05:02

解决方案2 0 2018-08-16 06:06:34

解决方案1
0 2018-08-16 00:05:02

解决方案2
0 2018-08-16 06:06:34