在 ASP.NET Core 2.2 Web 应用程序项目中自定义 Bootstrap

引言

Visual Studio 2017 中 .NET Core 2.2 的默认 Web 应用程序模板在“wwwroot/lib”文件夹中包含 Bootstrap 的默认实现，如果您不介意您的应用程序/站点看起来与其他所有 Bootstrap 站点一样，或者无论您是否使用 Bootstrap 的所有功能，都包含大小不等的 css 和 js 文件，那么这没什么问题。

我提供的解决方案是使用 npm 和 webpack 创建自定义的、精简的 Bootstrap 包。我选择 npm 仅仅是因为我在开发前端应用程序时使用它，所以它比较熟悉。

虽然本文档主要关注为 .NET Core 应用程序自定义 Bootstrap，但相同的技术也可用于其他项目。

如果您尚未安装，请确保已安装 Visual Studio 2017（社区版或其他版本）、.NET Core SDK 2.2 和 Node.js。您还需要在 Visual Studio 2017 中安装“ASP.NET and web development”工作负载。

首次创建 .NET Core Web 应用程序时，您将看到类似这样的文件夹结构

删除“wwwroot/lib/bootstrap”文件夹及其所有内容和子文件夹。我们将不再使用它。

在 Visual Studio 2017 中，在项目根文件夹中添加一个名为 package.json 的“npm Configuration File”。

注意：使用 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 部分，其中包含我们将用于构建打包文件的命令，截取

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

在项目根文件夹中创建“client”文件夹，并在“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 中使用的颜色和字体，可能只包含模态框和工具提示的 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 文件，截取

...
    <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，那么如果最终用户可以访问 Internet，引用通过知名 CDN 的完整 JS 是最佳解决方案，因为通过同一 CDN 引用它的其他站点可能已经在其浏览器中缓存了完整的 JS。

您可以进行的另一项更改是确保每次生成项目时都会生成包。要做到这一点，请选择“Tools > Other Windows > Task Runner Explorer”。在 Task Runner Explorer 中，您应该会看到您的 package.jso 文件以及我们在“Custom”下创建的脚本项。右键单击“bundles”项，选择“Bindings”，然后选择“Before Build”。现在，每当您生成项目时，都会先生成包。但是，您可能会发现生成过程花费的时间过长，在这种情况下，只需按需生成 Bootstrap 文件。

如果您想使用 Azure DevOps 来构建项目和 Bootstrap 包作为 CI 管道的一部分，您需要采取一些步骤。

目前，您需要包含 .NET Core 2.2 SDK，因为它在此日期之前在 Azure DevOps 中不是自动可用的。当您按照本文档操作时，它可能已经可用，在这种情况下，可以跳过此第一步。在管道顶部添加一个“.NET Core SDK Installer”步骤，如下所示

您还需要让管道安装 npm 及其依赖项，因此在 Restore 步骤之后添加一个 npm 步骤并使用 install 命令，确保选择正确的文件夹，如下所示

然后，您可以添加一个 npm 命令来构建您的包，方法是添加一个带有自定义命令“run bundles”（或您设置的任何脚本命令）的进一步 npm 步骤，同样确保选择正确的文件夹，如下所示