虽然是个简单的功能，但是发现按照很多网上的方法去操作并不能实现方法，所以还是写一下好了

需要借助 sass-resources-loader工具

npm install sass-resources-loader

在src\assets\css 目录中新建一个common.scss文件，并且声明一个变量

/* common.scss */
$main-color: darkolivegreen;

然后在项目的根目录下，新建vue.config.js文件，输入以下内容

// 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({
                    // Provide path to the file with resources
                    // 要公用的scss的路径
                    resources: './src/assets/css/common.scss'
                })
                .end()
        })
    }
}

接着在.vue文件中，就可以直接用color:$main-color了

// home.vue
<style lang="scss" scoped>
    .search{
        font-size: 12px;
        color: $main-color;
    }
</style>

其他版本的vue-cli和webpack参照官网配置：
https://www.npmjs.com/package/sass-resources-loader