虽然是个简单的功能，但是发现按照很多网上的方法去操作并不能实现方法，所以还是写一下好了
需要借助 sass-resources-loader工具
npm install sass-resources-loader
在src\assets\css 目录中新建一个common.scss文件，并且声明一个变量
/* common.scss */$main-color: darkolivegreen;
然后在项目的根目录下，新建vue.config.js文件，输入以下内容
// vue.config.jsmodule.exports = {chainWebpack: config => {const oneOfsMap = config.module.rule('scss').oneOfs.storeoneOfsMap.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参照官网配置：
/package/sass-resources-loader
