AngularでBulmaを利用ス

概要

完全に備忘録です。

手順

1.Angularプロジェクトを初期化するときにSaSSを選択する

ng new {project name}
? Would you like to add Angular routing? {y or n}
? Which stylesheet format would you like to use? Sass 

2.npmにてBulmaをインストール

npm install -s bulma

3.プロジェクトにインポートさせる

プロジェクト上の/src/styles.sassに下記のコードを追加して、Bulmaをインポートさせる。

@import "../node_modules/bulma/bulma.sass"

4.動作確認

動作確認を行うため、/src/app/app.component.htmlにBlumaのコードに変更する。

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>

      <a class="navbar-item">
        Documentation
      </a>

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          More
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            About
          </a>
          <a class="navbar-item">
            Jobs
          </a>
          <a class="navbar-item">
            Contact
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            Report an issue
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

参考：https://bulma.io/documentation/components/navbar/

下記のコマンドでサーバ立ち上げして表示できていれば成功です。

ng serve

成功表示