環境
- Nuxt.js 2.8
背景
Nuxt.jsはVuejsを元に作られているので、CSSフレームワークを追加したいときは、「追加したいCSSフレームワーク vuejs」とかで検索すればインストール方法がすぐ出る。現に、bootstrap-vueとかvuetifyはそれ専用のライブラリが出ているので、npm install するだけで簡単に導入できる。
一方で、Vuejs向けに最適化されていないCSSフレームワークは導入がよくわからなかったのでメモ。巷ではCSSファイルを落としてきてとか直リンクをそのままstyleタグで読み込んでいたりするが、ちょっとイケてなさすぎるのでは。。
条件としては
- npmパッケージでリリースされている
- scssで書かれている
前準備
デフォルトではNuxt.jsはsassを読めないのでローダーを入れる
npm install -S node-sass sass-loader
インストール手順
例えば珍しい国産CSSフレームワーク「MUSUBii」をNuxt.jsに導入する手順を示す。
nuxtjsのプロジェクト上でCSSフレームワークを普通にインストール
npm install -S musubii
assets/common.scssを新規作成して以下 ここではCSSフレームワークで読み込みたいscssファイルを書く。node_modulesは省略可能
@import "musubii/src/scss/musubii.scss";
あとは nuxt.config.js のCSSに以下を追記するだけ。~がないとエラーになるので注意
css: [ "~assets/common.scss" ],
これでnpm run devを再起動すればおｋ
ちなみにcommon.scssのファイル名は適当なので他でももちろん可
