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

Question

Let me start off by saying I've seen a StackOverflow question related to this but none of the solutions solved the problem. 首先，我说我已经看到了与此相关的StackOverflow问题，但是没有一个解决方案可以解决该问题。

I'm trying to add custom stylesheets and JS script files to a new ASP.NET Core solution. 我正在尝试将自定义样式表和JS脚本文件添加到新的ASP.NET Core解决方案中。

The css and JS files in wwwroot do work just fine, but I'd like to be able to add my own as well. wwwroot中的css和JS文件确实可以正常工作，但是我也希望能够添加自己的文件。

I've added a Content folder to the project with a CSS folder inside of that(Content folder > CSS folder > Site.css), attempted to wire it up with a link tag in the _Layout.cshtml file but no success. 我已经在项目中添加了一个Content文件夹，其中有一个CSS文件夹（Content文件夹> CSS文件夹> Site.css），试图通过_Layout.cshtml文件中的链接标记将其连接起来，但是没有成功。

I also have a "Scripts" folder inside of the Content folder (Content folder > Scripts folder > CustomJS.js) mentioned above with the Javscript file (CustomJS.js) inside of that but am not sure how to wire that up either now that the BundleConfig file in the AppStart folder is gone. 我在上面提到的Content文件夹（Content文件夹> Scripts文件夹> CustomJS.js）中也有一个“ Scripts”文件夹，其中还有Javscript文件（CustomJS.js），但现在不确定如何将其连接起来AppStart文件夹中的BundleConfig文件消失了。

What am I missing here? 我在这里想念什么？

Here is the _Layout.cshtml file from top to end of head tags. 这是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

In order to serve the scripts and css from a directory other than wwwroot, you need to add another static file handler to your request pipeline. 为了从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"
    });
}

See more details in the ASP.NET Core documentation on Static files . 有关静态文件，请参见ASP.NET Core文档中的更多详细信息。

Answer 2

You can try with BuildBundlerMinifier 您可以尝试使用BuildBundlerMinifier

Install-Package BuildBundlerMinifier -Version 2.8.391

Install this package in your web project, after that create in the root of the project bundleconfig.json file. 在您的Web项目中安装此软件包，然后在项目bundleconfig.json文件的根目录中创建。 Here an example of the content of this file, you could only put your custom js/css files, if you don't want to change the jquery references in the layout. 在此文件内容示例中，如果不想在布局中更改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"
    ]
  }

]

This JS/CSS files are created on build of your project. 此JS / CSS文件是在项目的构建中创建的。 If you make changes only in the js files you could Clean/Rebuild your project so they are reload properly. 如果仅在js文件中进行更改，则可以清理/重建项目，以便正确地重新加载它们。 This is what you should see on build in your output: 这是您在生成的输出中应该看到的内容：

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