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

问题描述

最近，我开始学习ASP.Net核心MVC.我一直使用Bower在Visual Studio 2017中为我的项目安装软件包.但是现在我想使用yarn.因为似乎不赞成使用凉亭.但我不知道如何使用yarn在wwwroot文件夹中安装bootstarp.对于Bower，我使用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"
  }
}

下一步 ==>在您的项目中创建一个名为Middleware的根文件夹，您将在您的请求中构建一个自定义扩展名/中间件(这些文件将进入节点模块文件夹以提供文件).管道位于 startup.cs 内部，请确保将名为App.UseNodeModules()的新扩展名放置在应用程序的下面.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的类，您将创建一个应用程序.UseStaticFiles()带有指向npm包的请求路径，将以下内容添加到该类中(您不会使用默认应用.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文件夹，展开该文件夹以查看bootstrap => 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文件夹中安装引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！