BULMAのスタイルを使用したVueプロジェクトの作成

プロジェクトのCSS

Webアプリケーションを作成するときにCSSをゼロから作成するのは時間がかかります。
CSSフレームワークを使用すると統一性のあるWebアプリケーションを短時間で構築することができます。
この記事では、BULMAをカスタマイズして使用するプロジェクトの雛形を作成します。

Vueプロジェクト作成

Vueプロジェクトを作成します。
プロジェクトディレクトリで下記のコマンドを実行します。 ここではプロジェクト名を vue-bulma とします。

1

vue create vue-bulma

下記のプラグインを追加します。

  • vuex(BULMAのスタイル適用とは関係ないですが追加しておきます)
  • Vue Router(BULMAのスタイル適用とは関係ないですが追加しておきます)

依存の追加

開発依存を追加します。

  • bulma
  • sass
  • sass-loader

Vue CLI のドキュメント「Working with CSS」 にあるように、webpackのバージョンと互換性のある古いバージョンのローダーを使用する必要があります。

BULMAの使用

カスタマイズ用のscssファイルをassetsに作成します。
App.vueでBULMAのsassとカスタマイズ用のscssを読み込みます。

1
2
3
4

<style lang="scss">
  @import "src/assets/bulmaCustom.scss";
  @import "../node_modules/bulma/bulma.sass";
</style>

コンパイルオプションの追加

BULMAで使用できるIconの一つIoniconsでは ion-icon タグを使用します。
ion-icon タグをカスタム要素として登録します。

vue.config.jsファイルを作成します。 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

module.exports = {
  chainWebpack: config => {
    config.module
    .rule('vue')
    .use('vue-loader')
    .tap(options => {
      options.compilerOptions = {
        ...options.compilerOptions,
        isCustomElement: tag => tag.startsWith('ion-')
      }
      return options
    })
  }
}

リンク

Working with CSS
コンパイルオプション
ソース

Last Mod: May 6, 2022