Как заменить Bootstrap на семантический интерфейс для Aurelia's Starter Kit?

Question

Какие изменения необходимы для замены Bootstrap на Semantic-UI для этого шаблона стартера Aurealia (skeleton-typescript)?

Answer 1

Не зная точно, что вы имеете в виду, на это трудно ответить. Есть много разных вещей, о которых вы могли бы спросить.

Предполагая, что вы просто хотите узнать, как отключить пакеты и загрузить базовую загрузку css, вот что вам нужно сделать.

Я вручную удалил загрузочные записи из config.js и package.json файлов.

Я предполагаю, что вы можете выполнить то же самое, выполнив команду jspm uninstall bootstrap.

Затем я выполнил команду jspm install semantic-ui.

Есть еще два изменения, которые вам нужно будет сделать.

app.html, change <require from="bootstrap/css/bootstrap.css"></require> to <require from="semantic-ui/semantic.css"></require>.

В main.ts, изменить import 'bootstrap'; к import 'semantic-ui';

После внесения этих изменений, я могу видеть semantic.js и semantic.css файлы получать загружается браузером вместо начальной загрузки файлов. Страница не выглядит красиво, хотя я не обновлял ни один из элементов html, чтобы отображать классы или структуру семантики.

Есть два других изменения, которые вы захотите сделать для задач сборки и сборки.

В build/bundles.js, изменить

"bootstrap", 
"bootstrap/css/bootstrap.css!text", 

к

"semantic-ui", 
"semantic-ui/semantic.css!text", 

В build/export.js изменения

'bootstrap', [ 
    '/fonts/*' 
] 

к

'semantic-ui', [ 
    '/themes/{THEME_NAME_OF_CHOICE}/*' 
] 

Если это то, что вы ищете, просьба уточнить свой вопрос.

Надеюсь, это поможет!