共通SCSSファイルを各コンポーネントに読み込ませる設定とか諸々設定をWebpackでしようと思ったら、vue-cli3ではwebpack.config.jsファイルが消失しているようだ。

どうなってんの？と思って調べたら、どうやらvue-cli3では独自の方法でWebpackをラッピングしてるみたい。
Webpackは公式によると変更非推奨なパラメータとかあったりするから、その対策かな？わからんけど。

どうやらvue.config.jsをルートに作ることでWebpackの設定ができるようだ。

直接webpack.config.jsをいじることもできるみたいだけど、特に理由がないなら上の方法が良さそう。

共通SCSSを読み込ませたいなら、以下のように設定する。

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                datas: [
                    '@import "./src/styles/_mixins.scss"',
                    '@import "./src/styles/_variables.scss"'
                ]
            }
        }
    }
}