Блог

Я создаю мобильное приложение Blazor, созданное с использованием «dotnet new mobileblazorbindings», и я хочу, чтобы на моей странице был редактируемый заголовок.

Я использую Blazorise.Начальная загрузка в моем приложении, и я генерирую заголовок со следующей строкой в моем файле 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), что должно упростить задачу … или я так думал …)

Когда я запускаю приложение с загрузочным CSS по умолчанию, импортируемым шаблоном mobileblazorbindings (wwwroot css bootstrap bootstrap.min.css, который выглядит как Bootstrap 4.3.1), это работает отлично — текст выглядит как заголовок, но нажатие на него позволяет мне редактировать его.

Если я попытаюсь настроить загрузчик с помощью SASS и вместо этого загружу сгенерированный 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 amp;amp; 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 amp;amp; 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";
 

And here’s my root 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, но я не смог найти то, чего не хватает. Кажется, что это должно быть тривиально, но это просто не работает, что заставляет меня беспокоиться о любых других настройках, которые я мог бы сделать для начальной загрузки.

Вещи, которые я пробовал:

• Использование пакета WebCompiler NuGet для сборки SASS (это была моя первая попытка; я прочитал в инструкциях по сборке начальной загрузки, что ему нужен autoprefixer, и когда я включил это, я получил ошибки, потому что встроенному autoprefixer 2 года; у него определенно была та же проблема)
• загрузка начальной загрузки вручную, через libman и через npm / yarn
• различные версии Bootstrap от 4.3.1 до 5.0.0-бета-1
• Восстановление начальной загрузки в модуле, следуя инструкциям в https://getbootstrap.com/docs/4.5/getting-started/build-tools / ; когда я добираюсь до установки пакета, он жалуется, что нет файла gemfile
• переключение на Bulma вместо Bootstrap — помимо того, что для переключения стилей всего было бы довольно сложно, в нем нет удобных классов, которые реплицируют заголовки
• У меня нет курицы, которой можно пожертвовать…

Любая помощь или указания с благодарностью получены.

Заранее спасибо,

Ян

Хорошо, я нашел, в чем проблема. В конечном итоге я искал не в том месте. Это свелось к проблеме упорядочения классов CSS, а не к какой-либо проблеме сборки.

Помните мой элемент управления вводом:

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

Копаясь в исходном коде начальной загрузки, class .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";
 

Теперь class .h3 определяется после .form-control-plaintext, поэтому он имеет приоритет, и все работает отлично. У меня есть ввод, который выглядит как заголовок.