vue.config.js

// vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            scss: {
                prependData: ` @import "~@/assets/variables.scss"; `
            }
        }
    },
    lintOnSave: false,
    devServer: {
        overlay: {
            warnings: false,
            errors: false
        }
    }
};

sass-loader是8.0.2的

variables.scss

$main-color: #303133;
$content-color: #606266;
$tips-color: #909399;
$disabled-color: #c3cbd6;
$light-color: #f8f9fa;
$theme-color: #009688;
$link-color: #3399ff;
$success: #00cc66;
$primary: #3399ff;
$error: #ff3300;
$danger: #ff9900;

然后调用

<style lang="scss">
  .a {
    color: $error;
  }
</style>

最后就报错了，说$error未定义

网上找了半天都没有找到一个行之有效的解决办法，求遇到过这个问题的大佬帮忙看看