Quels sont les changements nécessaires pour remplacer le Bootstrap
avec Semantic-UI
pour ce modèle de départ d'Aurealia ( squelette-typescript ) ?
Réponse
Trop de publicités?Sans savoir exactement ce que vous voulez dire, il est difficile de répondre. Il y a un certain nombre de choses différentes sur lesquelles vous pouvez poser des questions.
En supposant que vous souhaitiez simplement savoir comment changer les paquets et charger le fichier css de base, voici ce qu'il faut faire.
J'ai supprimé manuellement les entrées bootstrap du fichier config.js
et le package.json
des dossiers.
Je suppose que vous pouvez faire la même chose en exécutant la commande jspm uninstall bootstrap
.
J'ai ensuite exécuté la commande jspm install semantic-ui
.
Il y a deux autres modifications à apporter.
En app.html
, changer <require from="bootstrap/css/bootstrap.css"></require>
a <require from="semantic-ui/semantic.css"></require>
.
En main.ts
, changer import 'bootstrap';
a import 'semantic-ui';
Après avoir effectué ces changements, je peux voir le semantic.js
y semantic.css
qui sont chargés par le navigateur à la place des fichiers d'amorçage. La page n'a pas l'air bien stylisée car je n'ai mis à jour aucun des éléments html pour refléter les classes ou la structure des éléments de semantic-ui.
Il y a deux autres changements que vous voudrez faire pour les tâches build/bundle gulp.
En build/bundles.js
, changer
"bootstrap",
"bootstrap/css/bootstrap.css!text",
à
"semantic-ui",
"semantic-ui/semantic.css!text",
En build/export.js
changer
'bootstrap', [
'/fonts/*'
]
à
'semantic-ui', [
'/themes/{THEME_NAME_OF_CHOICE}/*'
]
Si c'est ce que vous recherchez, veuillez préciser votre question.
J'espère que cela vous aidera !