.NET Core 2的默认Web应用程序模板
介绍
Visual Studio 2017中.NET Core 2.2的默认Web应用程序模板包含Bootstrap的默认实现，其在“wwwroot/lib”文件夹中。这非常好，如果您不关心您的应用程序/站点的样式与其他每个Bootstrap站点一样，或者不管您是否使用Bootstrap的所有功能，都包括大量的css和js文件。
我定制、修剪Bootstrap的解决方案是使用npm和webpack创建自己的自定义Bootstrap 的css和js包。我选择npm只是因为我在开发前端应用程序时使用它，因此它是熟悉的领域。
虽然这篇文章涉及定制Bootstrap以用于.NET Core应用程序，但同样的技术可用于其他项目。
如果尚未安装它们，请确保安装了Visual Studio 2017（社区或其他），.NET Core SDK 2.2和Node.js. 您还需要在Visual Studio 2017中安装“ASP.NET和Web开发”工作负载。
在Visual Studio 2017中包含“ASP.NET和Web开发”
安装.NET Core 2.2 SDK
安装包含npm的node.js.
首次创建.NET Core Web应用程序时，最终会得到一个文件夹结构，如下所示：
初始文件列表
删除“wwwroot /lib/bootstrap”文件夹及其所有内容和子文件夹。我们将不再使用它了。
在Visual Studio 2017中，在项目的名为package.json的根文件夹中添加“npm Configuration File” 。
添加npm配置文件
注意：使用npm安装软件包时，我们需要在项目文件夹中，而不是解决方案文件夹（如果不同）。另外，请注意，在安装软件包时，您不会编辑npm配置文件，因为npm将尝试更新配置文件，如果将其锁定，可能无法执行此操作。
在项目的根文件夹中打开命令提示符并发出以下命令来安装我们将要使用的包：
npm install --save bootstrap popper.js jquery
npm install --save-dev webpack webpack-cli
npm install --save-dev sass-loader node-sass
npm install --save-dev babel-loader @babel/core @babel/preset-env
npm install --save-dev uglifyjs-webpack-plugin更新package.json文件，使其包含一个包含命令的scripts部分，我们将用它来构建我们的捆绑文件，snip：
"scripts": {
"bootstrap-js": "webpack --mode production --progress --profile --config webpack.bootstrap.js",
"bootstrap-css": "node-sass
--output-style compressed client/css/bootstrap.scss wwwroot/css/bootstrap.min.css",
"bundles": "npm run bootstrap-js && npm run boostrap-css"
}在项目的根文件夹中创建“clients”文件夹，并在“client”文件夹中创建“js”和“css”文件夹。
使用以下测试内容创建“client/css/_custom.scss”（我们可以覆盖此文件中的任何Bootstrap sass变量以更改Bootstrap外观）：
// Will change the backcolor of the body to yellow instead of white
$body-bg: #f9fbaf;使用以下测试内容创建“client/css/bootstrap.scss”：
// import our application specific bootstrap overrides in _custom.scss
@import "custom";
// import whole of bootstrap
@import "~bootstrap/scss/bootstrap";
// or just import the bits of bootstrap we will be using
// (look in bootstrap's bootstrap.scss file for full list)
//@import "~bootstrap/scss/functions";
//@import "~bootstrap/scss/variables";
//@import "~bootstrap/scss/mixins";
//@import "~bootstrap/scss/root";
//@import "~bootstrap/scss/reboot";
//@import "~bootstrap/scss/type";
//@import "~bootstrap/scss/grid";
//@import "~bootstrap/scss/buttons";在“client/js”中，创建此bootstrap.js文件：
// include all of bootstrap javascript
//import 'bootstrap';
// or include just the bits of bootstrap javascript we want
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/tooltip';使用Visual Studio 2017在项目的根文件夹中添加以下JavaScript文件; “ webpack.bootstrap.js ”：
// path is so we can resolve relative paths later regardless
// of operating system differences
const path = require('path');
// uglifyjs-webpack-plugin will allow us to minify our js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
// js entry point
bootstrap: './client/js/bootstrap.js'
},
// default mode
mode: 'production',
// apply rules
module: {
rules: [
{
// use babel to transpile latest js into
// something earlier browsers understand
// may not be needed depending on source
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
optimization: {
minimizer: [
// js minification options
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
})
]
},
output: {
// output js and map filenames
filename: 'js/[name].min.js',
path: path.resolve(__dirname, 'wwwroot'),
sourceMapFilename: 'js/[name].js.map'
},
// make sure a .map is created
devtool: 'source-map'
};您现在可以在项目的根文件夹中的命令提示符处使用以下命令来生成初始文件包：
npm run bundles我们现在可以进行自定义，例如，更改bootstrap中使用的颜色和字体，可能只包括用于模态(modals)和工具提示(tooltips)的JavaScript，并且仅包括我们将实际使用的Bootstrap CSS的选择。这是通过编辑“client/js/bootstrap.js”，“client/css/_custom.scss”和“client/css/bootstrap.scss”文件的内容，然后重新运行“npm run bundles”来重新创建我们的捆绑文件来完成的。
我们还需要更新“Pages/Shared/_Layout.cshtml”文件以引用我们的bootstrap文件而不是bootstrap cdn和lib文件夹中的JavaScript和CSS文件，snip：
...
<link rel="stylesheet" href="~/css/bootstrap.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
...
<script src="~/js/bootstrap.min.js" asp-append-version="true"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
...是否需要添加或删除其他库将完全取决于您计划在Web应用程序中交付的内容。
如果您只是想提供整个Bootstrap JS并且只修改CSS，那么通过众所周知的CDN包含对完整JS的引用是最佳解决方案，如果最终用户可以访问互联网，因为完整的JS可能已经缓存在浏览器中，而不是通过相同的cdn访问其他引用它的站点。
您可以进行的另一项更改是确保每次构建项目时都会构建捆绑包。为此，请选择“工具 > 其他窗体> 任务运行器资源管理器 ”。在任务运行器资源管理器中，您应该看到package.jso文件和我们在“Custom”下创建的脚本项。右键单击“bundles”项，选择“Bindings”然后选择“Before Build”，现在无论何时构建项目，都会首先构建bundle。但是，您可能会发现构建需要的时间太长，您可以根据需要重新构建Bootstrap文件。
如果要使用Azure DevOps将项目和Bootstrap捆绑包构建为CI管道的一部分，则需要执行几个步骤。
目前，您需要包含.NET Core 2.2 SDK，因为截至此日期，Azure DevOps尚未准备好。当您来阅读本文时可能会出现这种情况，在这种情况下，可以跳过此第一步。在管道顶部添加“.NET Core SDK安装程序”步骤，如下所示：
您还需要让管道安装npm及其依赖项，因此在Restore步骤之后使用install命令添加npm步骤，确保选择正确的工作文件夹，类似于：
然后，您可以添加一个npm命令来构建捆绑包，方法是使用自定义命令“run bundles”（或您设置的任何脚本命令）添加另一个npm步骤，再次确保选择了正确的工作文件夹，类似于：
原文地址：https://www.codeproject.com/Articles/1276979/Customising-Bootstrap-in-ASP-NET-Core-2-2-Web-Appl