Vue CLI 3でグローバルなSCSSを読み込ませる

ググったら情報がいろいろあって、ちょっと悩んだので整理。

Sassが使えるようにする

$ yarn add -D node-sass sass-loader

.scssファイルを準備

↓こんな感じでパーシャル（名前が_で始まるファイル）があるとして、

フォルダ構成

src/
|- assets/
|  |- sass/
|  |  |- abstracts/
|  |  |  |- _functions.scss
|  |  |  |- _mixins.scss
|  |  |  |- _variables.scss
|  |  |  
|  |  |- base/
|  |  |  |- _reset.scss
|  |  |  
|  |  |- layout/
|  |  |  |- _grid.scss
|  |  |
|  |  |- themes/
|  |  |  |- _default.scss
|  |  |
|  |  |- main.scss
|  |  |- prepends.scss
|  ...
|
|- App.vue

全.vueファイルにインポートしたい（具体的なCSSを吐かない）ものはprepends.scssに入れる

prepends.scss

@import "./abstracts/variables";
@import "./abstracts/functions";
@import "./abstracts/mixins";

具体的なCSSを出力するものはmain.scssに入れる

main.scss

@import "./base/reset";
@import "./layout/grid";
@import "./themes/default";

プロジェクトに読み込ませる

main.jsに↓を追加する。

main.js

require('@/assets/sass/main.scss');

vue.config.js（無ければ作成して）のmodule.exportsに↓を追加する。

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "./src/assets/sass/prepends.scss";'
      }
    }
  }
};

ちなみに↑のprependData:はdata:と書くと

ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

こんなエラーが出てビルドが通らなくなっているので注意。