如何在 Blazor 应用程序中使用 SASS-generated bootstrap 将 bootstrap 样式应用于输入？

Question

我正在创建一个 Blazor Mobile 应用程序，它是使用“dotnet new mobileblazorbindings”生成的，我希望在我的页面上有一个可编辑的标题。

我在我的应用程序中使用 Blazorise.Bootstrap，我在我的 Razor 文件中使用以下行生成标题：

<TextEdit Plaintext="true" @bind-Text="Title" Class="h3"/>

结果如下HTML:

<input id="<some_guff>" type="text" class="form-control-plaintext h3" value="My title text"></input>

（非常好 bootstrap 包含 classes .h1-.h6 匹配标题 h1-h6），这应该使它成为 breeze...左右我以为...)

当我运行应用默认 Bootstrap CSS 由 mobileblazorbindings 模板导入时（wwwroot\css\bootstrap\bootstrap.min.css，这似乎是Bootstrap 4.3.1)，这非常有效 - 文本似乎是一个标题，但单击它可以编辑它。

如果我尝试使用 SASS 自定义 Bootstrap 并加载我生成的 bootstrap CSS，它会立即停止工作，并且输入看起来像正常输入.

我猜我的 SASS 构建中缺少某些东西，但过去几天我尝试了各种方法，但我找不到它。

这是我的 package.json:

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "workspaces": [
    "bootstrap"
  ],
  "dependencies": {
    "bootstrap": "next",
    "jquery": "^3.5.1",
    "open-iconic": "^1.1.1",
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@popperjs/core": "^2.6.0",
    "autoprefixer": "^10.2.1",
    "babel-loader": "^8.2.2",
    "babel-preset-es2015-ie": "^6.7.0",
    "css-loader": "^5.0.1",
    "mini-css-extract-plugin": "^1.3.3",
    "node-gyp": "^7.1.2",
    "node-sass": "^5.0.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.2.4",
    "postcss-cli": "^8.3.1",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.12.2",
    "webpack-cli": "^4.3.1"
  },
  "scripts": {
    "css-deploy": "npm run css-build && npm run css-postcss",
    "css-build": "node-sass app.scss dist/app.css",
    "css-postcss": "postcss --use autoprefixer --output dist/app.css dist/app.css",
    "css-watch": "npm run css-build -- --watch",
    "deploy": "npm run css-deploy && npm run js-build",
    "js-build": "babel _javascript --out-dir lib",
    "js-watch": "npm run js-build -- --watch",
    "start": "npm-run-all css-watch js-watch"
  }
}

这是我的 bootstrap-customisation.scss:

/* Import the open-iconic icons */
@import "../node_modules/open-iconic/font/css/open-iconic-bootstrap.min.css";

/* Required */
@import "bootstrap/scss/_functions";
@import "bootstrap/scss/_variables";
@import "bootstrap/scss/_mixins";

// Modify variables here

/* Standard bootstrap imports */
@import "bootstrap/scss/_root";
@import "bootstrap/scss/_reboot";
@import "bootstrap/scss/_type";
@import "bootstrap/scss/_images";
@import "bootstrap/scss/_code";
@import "bootstrap/scss/_grid";
@import "bootstrap/scss/_tables";
@import "bootstrap/scss/_forms";
@import "bootstrap/scss/_buttons";
@import "bootstrap/scss/_transitions";
@import "bootstrap/scss/_dropdown";
@import "bootstrap/scss/_button-group";
@import "bootstrap/scss/_input-group";
@import "bootstrap/scss/_custom-forms";
@import "bootstrap/scss/_nav";
@import "bootstrap/scss/_navbar";
@import "bootstrap/scss/_card";
@import "bootstrap/scss/_breadcrumb";
@import "bootstrap/scss/_pagination";
@import "bootstrap/scss/_badge";
@import "bootstrap/scss/_jumbotron";
@import "bootstrap/scss/_alert";
@import "bootstrap/scss/_progress";
@import "bootstrap/scss/_media";
@import "bootstrap/scss/_list-group";
@import "bootstrap/scss/_close";
@import "bootstrap/scss/_toasts";
@import "bootstrap/scss/_modal";
@import "bootstrap/scss/_tooltip";
@import "bootstrap/scss/_popover";
@import "bootstrap/scss/_carousel";
@import "bootstrap/scss/_spinners";
@import "bootstrap/scss/_utilities";
@import "bootstrap/scss/_print";

这是我的根 app.scss:

/* Source SASS file to build custom Bootstrap site file */
@import "bootstrap-customisation";

/* App-specific customizations */
@import "mystyles.scss";

其中 mystyles.scss 当前包含自动生成的 app.css 的原始内容。

我正在使用 yarn run css-deploy 构建我的 app.css，然后手动将生成的 dist\app.css 复制到 wwwroot\css\app.css

当我现在运行应用程序时，它几乎就在那里，但是缺少两件事：

导航栏中的图标（来自open-iconic）
输入现在是普通文本，而不是选择 h3 class

在过去的一周里，我一直在努力摆脱这堵砖墙，尝试了各种不同的构建方式 Bootstrap，但我一直无法找到缺少的东西。感觉这应该是微不足道的，但它就是行不通，这让我担心我可能会对 Bootstrap.

进行的任何其他自定义

我尝试过的事情：

使用 WebCompiler NuGet 包构建 SASS（这是我的第一次尝试；我在 Bootstrap 构建说明中读到它需要自动前缀，当我启用它时出现错误，因为嵌入式自动前缀器已有 2 年历史；它肯定有同样的问题）
通过 libman 和 npm/yarn
Bootstrap 的各种版本，从 4.3.1 到 5.0.0-beta-1
按照 https://getbootstrap.com/docs/4.5/getting-started/build-tools/ 中的说明在模块中重建 Bootstrap ；当我进入 bundle install 时，它抱怨没有 gemfile
切换到 Bulma 而不是 Bootstrap - 除了切换所有样式需要大量工作之外，它没有方便的 classes 复制headers
我没有鸡可以牺牲...

非常感谢收到任何帮助或指点。

提前致谢，

伊恩

Answer 1

好的，我找到问题所在了。最终我找错了地方。它归结为 CSS class 排序问题，而不是任何类型的构建问题。

记住我的输入控件：

<input id="<some_guff>" type="text" class="form-control-plaintext h3" value="My title text"></input>

深入bootstrap源码，class.form-control-plaintext定义在_forms.scss，.h3定义在_type.scss.

现在看看我的 bootstrap 导入：

/* Standard bootstrap imports */
@import "bootstrap/scss/_type";
...
@import "bootstrap/scss/_forms";

_type（带 .h3）先于 _forms（带 .form-control-plaintext），因此 .form-control-plaintext class 的定义优先于 .h3 的定义。将 _type 行移动到导入列表的末尾解决了它：

/* Standard bootstrap imports */
...
@import "bootstrap/scss/_forms";
...

@import "bootstrap/scss/_type";

现在 class .h3 是在 .form-control-plaintext 之后定义的，因此它具有优先权，并且一切正常。我有一个看起来像 header.

的输入

如何在 Blazor 应用程序中使用 SASS-generated bootstrap 将 bootstrap 样式应用于输入？

How can I apply a bootstrap style to an input with my SASS-generated bootstrap in a Blazor App?

twitter-bootstrap

sass

blazor

blazorise