Я создал кроссплатформенное приложение Ionic, следуя инструкции ЭТОГО .
Приложение успешно создано, и я могу запускать его локально (в браузере рабочего стола), а также на моем устройстве Android.
В качестве теста я пытаюсь добавить несколько кнопок в приложение.
Кнопки отображаются, но они являются стандартными кнопками и не отформатированы с помощью CSS в соответствии с примером THIS .
Ниже показано, как отображаются кнопки.
Это то, что я ожидаю увидеть (за исключением строки меню и контура телефона, очевидно).
Ниже приведен код, который я использую.
Создается файл ionic.css, а также файл ionic.bundle.js.
Почему кнопки не отображаются должным образом?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script data-ionic="inject">
(function(w){var i=w.Ionic=w.Ionic||{};i.version='3.9.2';i.angular='5.2.11';i.staticDir='build/';})(window);
</script>
<meta charset="UTF-8">
<title>GD</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- Ionic module -->
<script src="js/app.js"></script>
<!-- THIS HAS TO BE LAST BEFORE BODY -->
<!-- cordova.js required for cordova apps (remove if not needed) -->
<script src="cordova.js"></script>
<link href="build/main.css" rel="stylesheet">
</head>
<body ng-app="GD" ng-controller="TodoCtrl">
<button ion-button color="light">Light</button>
<button ion-button>Default</button>
<button ion-button color="secondary">Secondary</button>
<button ion-button color="danger">Danger</button>
<button ion-button color="dark">Dark</button>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>