Bootstrap webpack 捆绑网芯MVC

Question

我正在尝试使用 Bootstrap in.Net Core 6 配置 webpack。我需要有自己的自定义主题 colors 所以我在_variables.scss文件中配置了它们，如下所示：

$primary: #19194a;
$secondary: #d90855;
$light: #dddddd;
$dark: #8c8c8c;
$gray: #bebebe;
$success: #2e7b32;
$warning: #ff9633;
$danger: #b00020;
$white: #ffffff;
$black: #000000;

$theme-colors: (
  "primary": #19194a,
  "secondary": #d90855,
  "light": #dddddd,
  "dark": #8c8c8c,
  "gray": #bebebe,
  "success": #2e7b32,
  "warning": #ff9633,
  "danger": #b00020,
  "white": #ffffff,
  "black": #000000
);

还有一个用于导入引导程序和变量的global.scss ：

@import "variables";
@import '~bootstrap/scss/bootstrap';

body {
  @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: #E5E5E5;
}

但是，引导程序不是通过 NuGet 而是通过 npm 安装的。 所以我试图将节点模块引导程序与我的.scss文件捆绑在一起。 所以我最终得到的 WebPack 配置如下：

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const bundleFileName = 'bundle';
const dirName = 'wwwroot/dist';

module.exports = (env, argv) => {
    return {
        mode: argv.mode === "production" ? "production" : "development",
        entry: ['./node_modules/jquery/dist/jquery.js', './node_modules/bootstrap/dist/js/bootstrap.bundle.js', './wwwroot/js/site.js', './node_modules/bootstrap/scss/bootstrap.scss', './wwwroot/scss/global.scss'],
        output: {
            filename: bundleFileName + '.js',
            path: path.resolve(__dirname, dirName)
        },
        module: {
            rules: [
                {
                    test: /\.s[c|a]ss$/,
                    use:
                        [
                            'style-loader',
                            MiniCssExtractPlugin.loader,
                            'css-loader',
                            {
                                loader: 'postcss-loader', // Run postcss actions
                                options: {
                                    postcssOptions: {
                                        plugins: function () { // postcss plugins, can be exported to postcss.config.js
                                            
                                            let plugins = [require('autoprefixer')];
                                            
                                            if(argv.mode === "production") {
                                                
                                                plugins.push(require('cssnano'));
                                            }
                                            
                                            return plugins;
                                        }
                                    }
                                }
                            },
                            'sass-loader'
                        ]
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(),
            new MiniCssExtractPlugin({
                filename: bundleFileName + '.css'
            })
        ]
    };
};

然后在我的_Layout.cshtml文件中将这些包引用为：

<link rel="stylesheet" href="~/dist/bundle.css" />

和

<script src="~/dist/bundle.js"></script>

对我来说奇怪的是 colors 似乎适用于我的导航栏的样式，但 Bootstrap 功能/样式的 rest 都没有按预期工作。 当尝试从 Bootstrap 5.1 文档运行简单的演示表单时，它的样式不符合预期。 它最终看起来像这样：

登录页面源码如下：

@model dynamic

@{
    ViewBag.Title = "Login";
}

@section Styles {
    <link href="@Url.Content("~/scss/login.css")" rel="stylesheet" type="text/css" />
}

@section Scripts{
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
}

<div class="container">
    <h1 className="headerText">Welcome!</h1>
    <h2 className="subHeaderText">Please log in to use our services.</h2>
    <form>
        <div class="mb-3">
            <label for="exampleInputEmail1" class="form-label">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
            <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1">
        </div>
    </form>
</div>

我在global.scss中有如下样式：

.headerText {
  font-size: 62px;
  line-height: 72px;
  text-align: center;
  color: $primary;
}

即使它包含在捆绑包中，它也不会拉到页面上。 我可以打开由 WebPack 生成的 css 文件，并看到样式在那里，但没有显示。