如何在ASP.Net core MVC中使用yarn在wwwroot文件夹中安装bootstrap [英] How to use yarn in ASP.Net core MVC to install bootstrap in wwwroot folder

问题描述

最近我开始学习 ASP.Net 核心 MVC.我总是使用 bower 在 Visual Studio 2017 中为我的项目安装包.但现在我想使用纱线.因为似乎 bower 已被弃用.但我不知道如何使用纱线在 wwwroot 文件夹中安装 bootstarp.对于凉亭，我使用了 bower.json，它会自动安装 bootstarp.我使用yarn add bootstrap@4.0.0-alpha.6 --dev"但它安装在项目文件夹中的 node_modules 中，我在解决方案资源管理器中看不到它，谢谢

recently I started learning ASP.Net core MVC. I always used bower to install packages for my projects in Visual Studio 2017. but now I want to use yarn. since it seems bower is deprecated. but I don't know how to use yarn to install bootstarp in wwwroot folder. for bower i used bower.json and it would install bootstarp automatically. I use "yarn add bootstrap@4.0.0-alpha.6 --dev" but it install it in node_modules in the project folder and I can't see it in the solution explorer, thanks

推荐答案

对于 Asp.net 核心应用程序最好使用 npm(一个包管理器)，首先通过右键单击您的项目名称搜索并添加一个名为 npm 的包在 vs2017 的解决方案资源管理器中，点击添加"=> 添加新项目，在包内，添加你的引导程序作为依赖项，如下所示，

It's best to use npm(a package manager) for Asp.net core application,start by searching and adding a package called npm by right clicking on your project name in solution explorer in vs2017 and clicking on "add" => add new item",inside the package,add in your bootstrap as a dependency as showed below,

{
  "version": "1.0.0",
  "name": "nameofyourapplicationinsmallcaps",
  "private": true,
  "devDependencies": {
  },

  "dependencies": {
    "bootstrap": "4.1.0"
  }
}

下一步 ==> 在您的项目中创建一个名为中间件的根文件夹，您将在您的请求中构建自定义扩展/中间件(这些将查看节点模块文件夹以提供文件)startup.cs 内的管道，确保将名为 app.UseNodeModules() 的新扩展放在 app.UseStaticFiles() 中间件(这些提供来自 wwwroot 文件夹的文件)下，如下所示,

Next ==> Create a root folder within your project named middleware,you would be building a custom extension/midleware(these would look into the node module folder to serve up files) in your request pipelines inside of startup.cs ,ensure you place the new extension which can be named app.UseNodeModules() underneath the app.UseStaticFiles() middleware( these serves up files from the wwwroot folder) as showed below,

app.UseStaticFiles();app.UseNodeModules(env.ContentRootPath);

app.UseStaticFiles(); app.UseNodeModules(env.ContentRootPath);

在中间件文件夹中，添加一个可以命名为 ApplicationBuilderExtensions.cs 的类，您将创建一个 app.UseStaticFiles() 其自己的请求路径指向 npm 包，将以下内容添加到类中(您不会使用默认的 app.UseStaticFiles()),

Inside the middleware folder,add a class which can be named ApplicationBuilderExtensions.cs , you would be creating a app.UseStaticFiles() with its own request path pointing to the npm package,add the below to the class(you wont be using the default app.UseStaticFiles()),

using Microsoft.Extensions.FileProviders;
using System.IO;

namespace Microsoft.AspNetCore.Builder
{
    public  static class ApplicationBuilderExtensions
    {
        public static IApplicationBuilder UseNodeModules(this IApplicationBuilder app , string root)
        {
            var path = Path.Combine(root, "node_modules");
            var fileprovider = new PhysicalFileProvider(path);
            var options = new StaticFileOptions();
            options.RequestPath = "/node_modules";
            options.FileProvider = fileprovider;
            app.UseStaticFiles(options);
            return app;
        }
    }
}

下一步 ==> 在 vs2017 的解决方案资源管理器中寻找一个名为显示所有文件"的图标并点击它，你会看到一个 node_module 文件夹，展开这个文件夹以查看引导=>dist=>css，将 bootstrap.css 拖到 _Layout.cshtml 中的开始和结束 head 标记之间.

Next ==> look for an icon inside of your solution explorer in vs2017 named "show all files" and click it,you would see a node_module folder,expand this folder to view bootstrap=>dist=>css, drag the bootstrap.css in between the opening and closing head tag in your _Layout.cshtml.

完成所有这些之后，您就可以开始使用引导类为您的项目添加样式了.

After doing all these, you can start making use of bootstrap classes to add styling to your project.

这篇关于如何在ASP.Net core MVC中使用yarn在wwwroot文件夹中安装bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！