私のNuxt/Vuetify
appカスタムCSS後をロードしようとしていますが、Vuetify
のCSSですが、Vuetify
のCSSは後でロードされます。 CSS配列の順序を逆にしようとしました:
css: [
'~/assets/style/main.scss',
'~/assets/style/app.styl'
],
...そして、これらを入れ替えて、役に立たない。
このトピックに関する前の質問 の人気は、回答の欠如と組み合わされて、問題がVuetify
'側にあると私に思わせ、著者は問題を修正する気になりませんでした。
しかし、それは正しい説明ではなく、実際に解決策があるのでしょうか?
Nuxtの未解決の問題のようですが、残念ながら解決していません。 Vuetifyは、それが自分の側にあるとは思わないと言います: https://github.com/vuetifyjs/vuetify-loader/issues/2
Nuxt ^2.7.1
以降、CSSファイルの読み込みに一貫性がないという問題が発生しています。 この問題の場合 への参照と この問題の場合 があります。
彼らがそれを修正しようとしているようです ここで述べたように 。残念ながら、これがリリースされるまでは、以前のバージョンに戻す以外にできることがたくさんあるとは思いません。
私は同じ/同様の問題を抱えています。
私の場合、私(ちょっと)はnuxt設定ですべてのcssの読み込みを削除することで解決しました:
css: [
// ~/assets/style/app.styl,
// ~/assets/style/custom.styl,
],
そしてそれをplugins/vuetify.jsに追加しました:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import colors from 'vuetify/es5/util/colors'
import 'assets/style/app.styl'
import 'assets/style/custom.styl'
Vue.use(Vuetify)
これで、デフォルトのVuetifyテーマをオーバーライドできますが、Hot Module Replacementを使用してコードを再コンパイルするのにかなり時間がかかります。
多分それを行うための最良の方法ではありませんが、私はより良い方法を見つけることができませんでした。
これは、vuetify 2.2.19
、nuxt 2.0.0
、@nuxt/vuetify
の問題です。最初の解決策は、extractCss: true
のnuxt.config.json
を(ビルドセクションで)設定することです。しかし、私にとってはHMRバグにつながります-開発環境ではスタイルが動的に更新されないため、スタイルを更新するたびにページをリロードする必要がありました。
私の場合の適切な解決策は次のとおりです。
@nuxt/vuetify
を無効にし、vuetifyセクションを完全に削除し、buildModulesから'@nuxtjs/vuetify
を削除します。
nuxt.config.js
のスタイルセクションに正しい順序でスタイルを読み込みます。私はvuetifyでカスタムsass変数を使用していません。私にとっては次のようになります。
css: [
'vuetify/dist/vuetify.min.css',
'@mdi/font/css/materialdesignicons.css',
'~/assets/styles/main.scss'
]
カスタムsass変数を使用する場合でも、通常は頻繁に変更されないため、別のビルドステップでそれらに基づいてvuetifyをプリコンパイルして静的フォルダーに配置することをお勧めします。
次のプラグインを使用して手動でvuetifyを含めます。
import Vue from 'vue'
import Vuetify from 'vuetify'
import en from 'vuetify/lib/locale/en'
import lt from 'vuetify/lib/locale/lt'
import pl from 'vuetify/lib/locale/pl'
import colors from '~/config/colors'
Vue.use(Vuetify)
export default ({ app }) => {
app.vuetify = new Vuetify({
lang: {
locales: { en, lt, pl },
current: 'en'
},
icons: {
iconfont: 'mdi'
},
theme: {
options: {
customProperties: true
},
themes: {
light: colors
}
}
})
}