带有Bulma CSS的Angular 6呈现HTML元素而无需Bulma样式

Question

我刚刚安装了Angular 6，启动了一个新应用程序，并添加了Bulma作为CSS框架。

为确保一切正常运行，我对app.component.html模板做了一些快速更改，然后运行ng serve。这是HTML。

<div class="card" style="margin: 0 auto;">
  <h1>My New App</h1>
  <h3>You have a lot of work to do</h3>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>
      <ol>
        <li>sub-item 1</li>
        <li>sub-item 2</li>
      </ol>
    </li>
  </ul>
</div>

布尔玛很好。但是，令人困惑的是，H1和H3的呈现方式是这样的。

我是否错过了Angular 6的一些基本更改？可以肯定的是，HTML应该可以直接使用。

在这里您可以看到默认的布尔玛样式被删除

让我知道您是否要发布app.module.ts或app.component.ts，package.json或angular.json.文件。

#### app.component.css ####

ul {
  list-style: none;
}


#### angular.json ####

...

"styles": [
    "src/styles.css",
    "node_modules/bulma/css/bulma.min.css"
  ]

...

Answer 1

好的，所以问题出在布尔玛本身。它用HTML标头标记做了一些奇怪的事情。

您需要将this.route.data.subscribe((data: any) => { let dataVal = data.data_property; }); 等包裹在h1标记中。像这样：

<div class="content">

This Github issue进一步说明。

This Bulma documentation也很有帮助。