NUXT.JSを使用していて、VueフレームワークのVuetifyのSassをカスタマイズしようとした時、Vuetifyのマニュアルに説明がなかったので記載しておきます。(2020/5)
NUXT.JSでのvariables.scssの設置方法
Vuetifyはvariables.scss(sass)を読み込ませることで、カスタマイズすることが可能です。
javascript
---nuxt.config.js のmodule.exportsに追加
vuetify: {
customVariables: ['~assets/scss/variables.scss'],
treeShaking: true,
},treeShakingは[prod]では初期値が"true"ですが、[dev]では"false"になっているそうです。
カスタマイズを有効にするには、treeShakingを有効にする必要があります。
variables.scssの書き方サンプル
bootstrapのカスタマイズの経験があったり、SASSの変数を理解していれば、簡単に設定できると思います。
Themeのカラー等をカスタマイズする
primaryカラー等変更したい場合も、NUXT.JSの場合はnuxt.config.jsに記載する。
ちなみに、テーマを指定していない場合は、defaultでは"light"のテーマになる。
javascript
vuetify: {
customVariables: ['~assets/scss/variables.scss'],
treeShaking: true,
theme: {
themes: {
light: {
primary: '#1976D2',
secondary: '#424242',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FB8C00'
},
dark: {
primary: '#2196F3',
secondary: '#424242',
accent: '#FF4081',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FB8C00'
}
}
},
},NUXT.JSおすすめの書籍
Googleで検索したり、NUXT.JSのホームページのドキュメントで、大体の疑問や使い方は理解できると思うのですが体系的に学ぼうとするとやはり書籍が良いと思っています。下記は、おすすめの書籍です。
書籍版は高いですが、Vue.jsもカバーしていてわかりやすいです。
📦Amazon で関連書籍・ツールを検索
Nuxt.js Vue フロントエンド
Amazonで探す →（アソシエイトリンク）