Vue-cli3 でグローバルなCSSを読み込む

引き続き、あまり需要がなさそうというか本来の意義から逸れていそうな目的のために Vue CLI と格闘しています。

ゴール

最終的に出力された index.html でSCSSからコンパイルした共通CSSファイルを読み込み、Vueコンポーネント外の要素にCSSを適用できるようにする。

方法は一応2つあります。グローバルにVueコンポーネントで読み込んでしまう方法と、JSで呼び出す方法です。ただ実際には後者が優先になると思います。参考にしたのはこちら

forum.vuejs.org

グローバルにVueコンポーネントで読み込む

vue.config.js の module.exports 以下に次の設定を追加します。

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `@import "<読み込ませたいscssファイル>";`
            }
        },
    },
    ...
}

すると、指定したファイルのスタイルを挿入した上でコンポーネントをコンパイルするようになります。コンポーネントのSCSSを scoped にしていなければグローバルなスタイル適用の完成です。はい。

これはこの目的のために使っていい方法ではない

問題点

• 子要素から親要素にスコープを漏らすような書き方になっている。（全てのコンポーネントでscopedを指定すれば普通にコンポーネント外にはスタイルが適用されなくなります）
• 全コンポーネントの style 部に挿入されているだけであり、コンポーネントが複数あればその数だけ同じスタイルが増殖してしまう。

じゃあなんのためにこの機能があるかというと、mixinやfunctionやvariablesなどプリプロセッサ固有でありコンパイル後はCSSのコードとして出力されない設定要素を、いちいち全部のコンポーネントで import しなくてすむようにするためです。

公式でも、このオプションに指定するファイルには、CSSとして出力されてしまうスタイルを含まないよう勧告していました。*1

JSで呼び出す

main.jsに1行付け加えるだけ。

require('@/path/to/scss/entry.scss')

SCSSで書いていればモジュールを分割してエントリーポイントのようなファイルで一括読み込みしていると思うので、そのエントリーポイントを読み込みます。こうするとWebpackが勝手にコンパイルしていい感じにしてくれます。簡単。副作用なし。

まとめ

• 生CSSに変換されないプリプロセッサ固有の変数やmixinを各コンポーネントで読み込みたい時は vue.config.js 内CSSパラメータの loaderOptionsを使う。
• グローバルなCSSファイルをテンプレートで読み込みたい時はmain.jsでrequireする。

すっきり解決してついでにスマートなモジュール読み込み方法も知れたので、充実した話題でした。

（そもそもせっかくVueを使うならグローバルなCSSなんてものからは手を引けという声が聞こえる）

*1:ソースをメモしておくのを忘れたので間違ってるかもしれない