web-dev-qa-db-ja.com

Nuxt＆Vuetify：CSSファイルがロードされる順序を制御する方法？

私のNuxt/Vuetify appカスタムCSS後をロードしようとしていますが、VuetifyのCSSですが、VuetifyのCSSは後でロードされます。 CSS配列の順序を逆にしようとしました：

css: [
    '~/assets/style/main.scss',
    '~/assets/style/app.styl'
  ],

...そして、これらを入れ替えて、役に立たない。

このトピックに関する前の質問 の人気は、回答の欠如と組み合わされて、問題がVuetify '側にあると私に思わせ、著者は問題を修正する気になりませんでした。

しかし、それは正しい説明ではなく、実際に解決策があるのでしょうか？

cssvue.jsvuetify.jsnuxt
5
drake035

Nuxtの未解決の問題のようですが、残念ながら解決していません。 Vuetifyは、それが自分の側にあるとは思わないと言います： https://github.com/vuetifyjs/vuetify-loader/issues/2

Nuxt ^2.7.1以降、CSSファイルの読み込みに一貫性がないという問題が発生しています。 この問題の場合 への参照と この問題の場合 があります。

彼らがそれを修正しようとしているようです ここで述べたように 。残念ながら、これがリリースされるまでは、以前のバージョンに戻す以外にできることがたくさんあるとは思いません。

1
Nick G

私は同じ/同様の問題を抱えています。

私の場合、私（ちょっと）は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を使用してコードを再コンパイルするのにかなり時間がかかります。

多分それを行うための最良の方法ではありませんが、私はより良い方法を見つけることができませんでした。

0
imricardoramos

これは、vuetify 2.2.19、nuxt 2.0.0、@nuxt/vuetifyの問題です。最初の解決策は、extractCss: trueのnuxt.config.jsonを（ビルドセクションで）設定することです。しかし、私にとってはHMRバグにつながります-開発環境ではスタイルが動的に更新されないため、スタイルを更新するたびにページをリロードする必要がありました。

私の場合の適切な解決策は次のとおりです。

  1. @nuxt/vuetifyを無効にし、vuetifyセクションを完全に削除し、buildModulesから'@nuxtjs/vuetifyを削除します。

  2. nuxt.config.jsのスタイルセクションに正しい順序でスタイルを読み込みます。私はvuetifyでカスタムsass変数を使用していません。私にとっては次のようになります。

css: [
  'vuetify/dist/vuetify.min.css',
  '@mdi/font/css/materialdesignicons.css',
  '~/assets/styles/main.scss'
]

  1. カスタムsass変数を使用する場合でも、通常は頻繁に変更されないため、別のビルドステップでそれらに基づいてvuetifyをプリコンパイルして静的フォルダーに配置することをお勧めします。

  2. 次のプラグインを使用して手動で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
      }
    }
  })
}
0
Kasheftin