VueCLI3で共通のSassファイルを各コンポーネントから読み込む

コンポーネント開発において、Sassなどのプリプロセッサ特有の定数やMixinを
各コンポーネントでimportするのは手間なので、プロジェクトで一括してロードしたい場合があります😔

sass-loaderの場合

sass-loaderにはdataオプションというものがあり、
Sass変数など、複数のsassファイルから参照する内容を追加することができます。

webpack.confg.js

{
    loader: "sass-loader",
    options: {
        data: "$env: " + process.env.NODE_ENV + ";"
    }
}

しかし、VueCLI3では、webpackの設定が隠されているため、
webpack.config.jsなどに書いていた設定はvue.config.jsに書きます🙃

css.loaderOptionsを使う

vue.config.js に以下のような設定を追加します。（参考例）

vue.config.js

const path = require('path');
const SRC_DIR = path.resolve(__dirname, 'src');
const SASS_DIR = path.join(SRC_DIR, 'assets', 'sass');
const SASS_AUTO_IMPORTS = `
@import "${path.join(SASS_DIR, '_variables.sass')}";
`;

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: SASS_AUTO_IMPORTS
      }
    }
  }
}

loaderOptionsを介することで各ローダーの設定ができます。
つまり、css.loaderOptions.sassに渡せばsass-loaderにoptionを渡すことが可能になります✌️

サポートしているローダーはこちら

• css-loader
• postcss-loader
• sass-loader
• less-loader
• stylus-loader

注意点

この設定は、各コンポーネントの<style>部分に挿入されるだけなので、コンポーネントが複数あればその数だけ同じスタイルの記述が増えます。
なので、このオプションに指定するファイルには、コンパイル後にCSSのコードとして出力されない設定要素（mixin、function、variablesなど）を指定するべきです。
つまり、CSSとして出力されてしまうスタイルを含まないようにすべきということです。

参考