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

【问题标题】：How do I add custom stylesheets and scripts to a ASP.NET Core project?如何将自定义样式表和脚本添加到 ASP.NET Core 项目？
【发布时间】：2019-01-22 20:56:31
【问题描述】：

首先让我说我已经看到一个与此相关的 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>

【问题讨论】：

标签： javascript c# css asp.net asp.net-core

【解决方案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"
    });
}

在Static files 上的 ASP.NET Core 文档中查看更多详细信息。

【讨论】：

您在“配置”中使用了什么 using 指令？其他一切看起来都不错，但它不喜欢 Configure，因为“命名空间不能直接包含字段或方法等成员”
@RussellAlan 与我们分享您的Startup.cs。这个错误发生在哪里？
@Edward 今天晚些时候我会提供 Startup.cs 文件。我目前无权访问该项目。

【解决方案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

【讨论】：