importar archivo scss en componente: File to import not found or unreadable: _variables.scss.

Componente 1

<template>
  <div>
 <Topnav />
    </header>
        <footer class="footer">
            ...
        </footer>
  </div>
</template>

<script>
**//**
</script>
<style lang="sass">
body
  background-color: $background;
</style>

...\frontend\src\assets\scss_variables.scss

// Color system
$green-primary: #2E7D33;
$green-primary-light: #60AD5F;
$green-primary-dark: #005006;
$text-primary: #4D4F5C;
$blue-secondary: #265563;
$blue-secondary-light: #548291;
$blue-action: #109CF1;
$orange-warning: #F6B84B;
$green-success:#54BD9D;
$background: #FDFDFF;
//

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/_variables.scss";
          @import "@/scss/_mixins.scss";
        `
      }
    }
  },
  productionSourceMap: false,

  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    },

    plugins: [
      new WorkboxPlugin.InjectManifest({
        swSrc: path.join(__dirname, 'src/sw.js')
      })
    ]
  },

  lintOnSave: 'error',

  outputDir: '../backend/assets',

  devServer: {
    proxy: {
      '/api': {
        target: 'https://localhost:1337/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

HablemosDeVueJS / doctor-vue

importar archivo scss en componente: File to import not found or unreadable: _variables.scss. #9