Nuxt 3でBulmaを使えるようにする方法

Nuxt 3と一緒にCSSフレームワークのBulmaを使おうとしたらら少し詰まったので手順をまとめてみました。

node-sass を使って Bulma を使えるように設定

Nuxt 3 で Bulma を使うときは node-sass で対応できそうだったので、Bulma のドキュメントに沿って作業をしていきます。

node-sass と Bulma をインストール

下記のコマンドでそれぞれをインストールします。

$ npm install node-sass --save-dev
$ npm install bulma --save-dev

正常に完了すると package.json の devDependencies に追加されているのが確認できます。

{
  "devDependencies": {
    "bulma": "^0.9.4",
    "node-sass": "^7.0.1",
    "nuxt": "3.0.0-rc.3"
  },
}

無事に追加できたので読み込むための設定をしていきます。

読み込むための SCSS ファイルを作成

node-sass で Bulma を使うには node_module/bulma ディレクトリ配下に追加されている bulma.sass を SCSS ファイルでインポートする必要があります。

今回は assets/scss ディレクトを作成してその配下に index.scss という名前でファイルを配置してみました。

$ vim assets/scss/index.scss
@charset "utf-8";

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

Bulma を読み込むための SCSS ファイルを作成できたら、このファイルを読み込むように nuxt.config.ts を変更します。

$ vim nuxt.config.ts
export default defineNuxtConfig({

  css:['assets/scss/index.scss']

})

これで設定は完了なので、ブラウザからアクセスして確認します。

ブラウザからアクセスして確認

ブラウザからアクセスしてみるとエラーが表示されました。。

同じ内容がログにも排出されています。

 ERROR  1:40:32 PM [vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?
  Plugin: vite:css
  File: /app/assets/scss/index.scss
      at loadPreprocessor (/app/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:36081:19)
      at scss (/app/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:36092:20)
      at compileCSS (/app/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:35699:40)
      at async TransformContext.transform (/app/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:35313:55)
      at async Object.transform (/app/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38900:30)
      at async doTransform (/app/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:55857:29)

ログを読むとどうやら sass が入っていない！と言われているようなので、 node-sass ではなく sass をインストールしてみます。

Nuxt 3 に Bulma を追加したときのエラー解消方法

sass をインストール

下記のコマンドを実行して、sass をインストール。

$ npm install sass --save-dev

ブラウザからアクセス

試しにドキュメントにあったパネルを表示させてみると無事に表示されました！