请教一个element ui组件按需加载情况下，覆盖sass全局变量失败的问题

Question

使用bable-plugin-component的前提下进行了如下配置，但是并没有生效

//vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "~@/styles/element-variables.scss";`
            }
        }

    }
}

//element-variables.scss
/*
Write your variables here. All available variables can be
found in element-ui/packages/theme-chalk/src/common/var.scss.
For example, to overwrite the theme color:
我是公共变量
*/
$--color-primary:yellow ;
$--border-radius-base: 2px;

/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';