如何用 Semantic-UI 替换 Aurelia 入门套件的 Bootstrap？

Question

将此 Aurealia 的入门模板 (skeleton-typescript) 的 Bootstrap 替换为 Semantic-UI 需要进行哪些更改？

Answer 1

不知道你的意思，很难回答。您可能会询问许多不同的事情。

假设您只想知道如何切换软件包并加载基础 css 文件，这就是您需要做的。

我从 config.js 和 package.json 文件中手动删除了 bootstrap 条目。

我假设您可以通过运行命令 jspm uninstall bootstrap.

完成相同的操作

然后我运行命令jspm install semantic-ui。

您还需要进行另外两项更改。

在 app.html 中，将 <require from="bootstrap/css/bootstrap.css"></require> 更改为 <require from="semantic-ui/semantic.css"></require>。

在main.ts中，将import 'bootstrap';更改为import 'semantic-ui';

进行这些更改后，我可以看到浏览器加载了 semantic.js 和 semantic.css 文件，而不是 bootstrap 文件。尽管我没有更新任何 html 元素以反映语义 ui 的类或元素结构，但该页面的样式看起来不太好。

您还需要对 build/bundle gulp 任务进行另外两项更改。

在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}/*'
]

如果这正是您要查找的内容，请更具体地说明您的问题。

希望对您有所帮助！

How to replace Bootstrap with Semantic-UI for Aurelia's Starter Kit?