twitter-bootstrap - 如何在 Blazor 应用程序中使用 SASS 生成的引导程序将引导程序样式应用于输入?
问题描述
我正在创建一个使用“dotnet new mobileblazorbindings”生成的 Blazor Mobile 应用程序,并且我希望在我的页面上有一个可编辑的标题。
我在我的应用程序中使用 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>
(引导程序包含匹配标题 h1-h6 的类 .h1-.h6 非常好),这应该让这变得轻而易举......或者我想......)
当我使用由 mobileblazorbindings 模板(wwwroot\css\bootstrap\bootstrap.min.css,似乎是 Bootstrap 4.3.1)导入的默认 Bootstrap CSS 运行应用程序时,这非常有效 - 文本似乎是一个标题,但点击它可以让我编辑它。
如果我尝试使用 SASS 自定义引导程序并加载我生成的引导程序 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 的原始内容。
我正在使用构建我的 app.css yarn run css-deploy
,然后手动将生成的 dist\app.css 复制到 wwwroot\css\app.css
当我现在运行该应用程序时,它几乎就在那里,但是缺少两件事:
- 导航栏中的图标(来自 open-iconic)
- 输入现在是普通文本,而不是选择 h3 类
在过去的一周里,我一直在把头从这堵砖墙上敲下来,尝试了各种不同的方法来构建 Bootstrap,但我一直无法找到缺少的东西。感觉这应该是微不足道的,但它不起作用,这让我担心我可能对 Bootstrap 做的任何其他定制。
我尝试过的事情:
- 使用 WebCompiler NuGet 包构建 SASS(这是我的第一次尝试;我阅读了 Bootstrap 构建说明,它需要自动前缀,当我启用时,我得到了错误,因为嵌入式自动前缀已经 2 年了;它肯定有同样的问题)
- 通过 libman 和 npm/yarn 手动下载 Bootstrap
- 从 4.3.1 到 5.0.0-beta-1 的各种 Bootstrap 版本
- 按照https://getbootstrap.com/docs/4.5/getting-started/build-tools/中的说明在模块中重建 Bootstrap ;当我进行捆绑安装时,它抱怨没有 gemfile
- 切换到 Bulma 而不是 Bootstrap - 除了切换所有样式的工作量很大之外,它没有复制标题的方便类
- 我没有鸡可以牺牲...
非常感激地收到任何帮助或指示。
提前致谢,
伊恩
解决方案
好的,我找到了问题所在。最终我找错地方了。它归结为 CSS 类排序问题,而不是任何类型的构建问题。
记住我的输入控件:
<input id="<some_guff>" type="text" class="form-control-plaintext h3" value="My title text"></input>
深入研究引导源代码,.form-control-plaintext 类定义在 _forms.scss 中,.h3 定义在 _type.scss 中。
现在看看我的引导导入:
/* Standard bootstrap imports */
@import "bootstrap/scss/_type";
...
@import "bootstrap/scss/_forms";
_type(使用 .h3)在 _forms(使用 .form-control-plaintext)之前,因此 .form-control-plaintext 类的定义优先于 .h3 的定义。将 _type 行移动到导入列表的末尾解决了它:
/* Standard bootstrap imports */
...
@import "bootstrap/scss/_forms";
...
@import "bootstrap/scss/_type";
现在 .h3 类是在 .form-control-plaintext 之后定义的,因此它具有优先权,并且一切正常。我有一个看起来像标题的输入。
推荐阅读
- raku - NativeCall 子绑定中的“通过的位置太多”
- python - 我无法将 view.py 和 url.py 连接到 html 文件
- c# - 关于 Null 条件的一个奇怪问题?
- c - C中的嵌套数组结构
- flutter - 键入'_InternalLinkedHashMap
' 不是类型 'Map 的子类型 ' - sas - proc corr 和 proc corr nomiss 之间的区别
- batch-file - 如何将参数传递给另一个正在运行的批处理程序
- python - python skype groupchat GET响应错误
- android - 可在回收站视图中绘制的垂直快速滚动仅在底部导航抽屉和工具栏下方之间移动,就像在谷歌照片中一样
- python-3.x - SqlAlchemy 'datetime.datetime' 未映射