如何用Aurelia的Starter Kit的Semantic-UI替换Bootstrap？

Question

什么样的变化,需要更换Bootstrap与Semantic-UI此Aurealia的入门模板(骨架打字稿)？

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元素来反映语义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}/*'
]

如果这是您正在寻找的,请更具体地说明您的问题.

希望这可以帮助!