javascript - 如何将 Bootstrap 替换为 Aurelia 入门套件的 Semantic-UI？

Question

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

Answer 1

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

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

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

我假设您可以通过运行命令 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 元素来反射(reflect) semantic-ui 的类或元素结构，但该页面的样式看起来不太好。

对于构建/捆绑 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}/*'
]

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

希望这对您有所帮助!