vuecli4 はパブリック scss スタイル ファイルを構成します

1. sass-resources-loader をインストールする

npm install sass-resources-loader

2. vue.config.js 設定を変更する

module.exports = {
	chainWebpack: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
            item
                .use('sass-resources-loader')
                .loader('sass-resources-loader')
                .options({
                    // 要公用的scss的路径
                    resources: './src/assets/css/reset.scss'
                })
                .end()
        })
    }
}

3. 使用する

/*
* common.scss 文件
*/

$mainColor: red;

/*
* index.vue文件
*/
h3 {
	color: $mainColor;
}