[nuxt.js][vuetify]自前のカスタムCSSをheadタグの最後に読み込ませる方法

nuxt.jsで自前のカスタムCSSをheadタグの最後に読み込ませたい、という必要がありました。 通常、nuxtで外部CSSなどを使う場合は、nuxt.config.jsのcssの部分に記載すれば読み込んでくれます。 しかし、CSSを含めたフレームワーク(vuetifyなど)のcssをカスタムする場合、この方法だとフレームワークのCSSより先に読み込まれてしまうため、CSSが適用されません。 !importantで無理やり適用させてもいいのですが、カスタムするCSSの定義が増えると大変です。 その上、nuxtの仕様でページが切り替わるたびに、CSSタグが追加されていく・・・。 もちろん、そのページ内で完結するカスタマイズのCSSなら、page/ ディレクトリ以下やコンポーネントのvueファイルのstyleタグに書けばいいのですが。 じゃあ、全てのコンポーネントのCSSをカスタマイズしたい場合は?全部のpage以下ディレクトリやコンポーネントにカスタムCSSを読み込ませるのも面倒だし抜け漏れが発生してしまう可能性があります。 CSSの詳細なカスタマイズがフレームワークの公式機能で提供されていない場合、元のソースを改変するか、この方法で適用させるしかありませんでした。 なんとかして、headタグの最後にカスタマイズしたい自前のCSSを読み込ませる方法を探しました。

headタグの末尾にcssを読み込ませる手順

nuxt.config.jsの設定
  build: {
    extractCSS: true,
    ...(以下略)
extracsCSS:trueにします。これで使用するCSSが全て外部ファイルになります。 layout/defalut.vueの設定(CSSカスタマイズするページは全てこのレイアウトを経由するとします)
watch: {
    $route: function(to, from) {
      if (to.path !== from.path) {
        this.setCustomCss()
      }
    }
  },
  methods: {
    setCustomCss() {
      if (this.cssId) {
        document.getElementById(this.cssId).remove()
      }

      this.cssId = Math.random()
        .toString(32)
        .substring(2)
      let preloadedStyle = document.createElement('link')
      preloadedStyle.href = '/custom_style.css'
      preloadedStyle.rel = 'stylesheet'
      preloadedStyle.id = this.cssId
      document.head.appendChild(preloadedStyle)
    },
(以下略...)
ポイント:watchで$routeを監視して、pathが変化するたびにsetCustomCss()が呼び出されて、headタグのCSSを書き換えるようにします。 document.head.appendChild()で、headタグの末尾にこの例では/custom_style.cssが追加されます。 ただし、毎回追加されてしまうので、ランダムに付与するcssIdを監視して以前に追加したCSSタグをdocument.getElementByIdで取り除きます。 結果、以下のようなHTMLソースコードになります。
headタグの末尾に/custom_style.cssが追加されているのがおわかりいただけただろうか・・・

コメントする