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"
    });
}

在Static files上的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 个答案: