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

Question

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

Answer 1

在不确切知道你的意思的情况下，很难回答。您可能会问很多不同的问题。

假设您只是想知道如何切换包并加载基本 css 文件，那么您需要执行以下操作。

我手动从 config.js 中删除了引导条目和 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浏览器加载的文件代替引导文件。该页面的样式看起来不太好，因为我没有更新任何 html 元素来反射(reflect)语义 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}/*'
]

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

希望这有帮助!