Sign in Subscribe

Topic

Vue.js

A collection of 2 issues

Nuxt.jsでSCSSを使うとき、グローバルの変数を使う

コンポーネントやページでいちいち変数ファイルの依存を追加するのが面倒なので。どこでも使えるように設定します。依存ライブラリの追加 yarn add -D @nuxtjs/style-resources 変数定義 SCSS の用意今回は~/assets/css/variables.scssに作成しました。 // Import Bulma's core @import '~bulma/sass/utilities/_all'; $primary: #10abd0; $primary-invert: findColorInvert($primary); $twitter: #4099ff; $twitter-invert: findColorInvert($twitter); // 以下続く。。。 nuxt.config.js の編集使用モジュール、設定をそれぞれ追加します。 // nuxt.config.js export default { modules: ['@nuxtjs/

Nuxt.jsでコンポーネントを一括登録する

Nuxt.js + Buefy 開発環境、快適。いちいちコンポーネントを登録するのがめんどくさい Nuxt.js、便利ですがコンポーネントを作成したらimportするとか.jsファイルに登録するとかちょっと面倒です。特にプロジェクトで大量に作成しなきゃいけないときとか、登録用の JS ファイルが競合したりもします。ビルド時に一括読み込み webpackの仕組みで、ビルド時に指定ディレクトリを見て一括登録できます。 Vue.js のドキュメントに書いてありました。他にも、mixinやfilterも一括登録したいですよね。それをもとに書き起こしたのがこちら。 // ファイル名をコンポーネント名に変換する function pascal2ComponentName(fileName) { const temp = pascal2camel(fileName) return temp[0].toUpperCase() + temp.substr(1) } // ファイル名をキャメルケースに変換する function