Vue.jsでCSSファイルをindex.htmlにインラインCSSとして取り込む方法

外部CSSを取り込む

Vueアプリ内部のみスタイルの場合

Vue.jsでcssファイルを取り込む方法としては、コンポーネント側のstyleでファイル指定する方法があります。

<style src="./assets/css/main.css"></style>

CSSの適用範囲がVue.jsアプリ内のみならばこの方法でOKです。

スタイルの範囲がVueアプリの外まで含まれる場合

もし、Vue.jsの外側（html, bodyなども含む）も含めて処理をしたいのであれば、main.js側でcssファイルをロードする方法を取ります。

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import css from './assets/css/main.css'

new Vue({
  router,
  store,
  css,
  render: h => h(App)
}).$mount('#app')

なぜこうする必要があるのかというと、Vue.jsはデフォルトで要素に変数を振ってCSSを適用させるため、Vueコンポーネント内のstyleでCSSをロードすると、

html[data-v-7ba5bd90] {  
  background: #EEE;
}

body[data-v-7ba5bd90] {
  max-width: 1000px; 
  margin: 0 auto;
}

という形で、変数制限付きのスタイルになってしまうからです。これだと、Vueの外部にある要素についてはCSSが適用されません。

しかし、importする方式であれば、CSSはそのままの形で反映されます。

WebpackでCSSをindex.htmlにインライン挿入する

CSSの設定ができたら、あとはWebpack側の設定です。まず、CSSをインライン化するプラグインをインストールします。

yarn add html-webpack-inline-source-plugin

インストールができたら、vue.config.jsでWebpackの設定を追加します。

module.exports = {    
  chainWebpack: config => {
    config
      .plugin('html-inline-source')
      .use(require('html-webpack-inline-source-plugin'))
    config.plugin('html').tap(args => {
      args[0].inlineSource = '^(/css/.+\\.css)'
      return args
    })
  }
  .
  .
}

index.html側は特に何も変更する必要はありません。vue.config.jsにこの設定を入れるだけで、Vue.js側で読んでいる全てのCSSをheadにインラインで記述してくれます。

全部のCSSを入れたくない場合は、「args[0].inlineSource」の引数の部分の正規表現で、対象のCSSを絞り込むと良いでしょう。

Vue.jsで外部CSSをindex.htmlのインラインCSSとして取り込む方法を見てきました。

アプリの規模が大きくなると、CSSファイルの数もサイズを大きくなってレンダリングブロックの原因になるので、Vue.jsアプリで高速表示させたいなら必須の設定と言えるでしょう。