Access the sass variable from a different folder Vue JS

Viewed 98

i've tried to create component ButtonFilled.vue and i want to styling sass on this component and access the sass variable like this

enter image description here

but i qot this error, any solution? enter image description here

this is my main.js file

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import "@/assets/sass/master.sass";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

this is my master.sass

// Base
@import "./base/fonts"
@import "./base/resets"
@import "./base/typography"

// Abstracts
@import "./abstracts/variables"
@import "./abstracts/functions"
@import "./abstracts/mixins"
1 Answers

i use this on vue.config.js and its works, thanks all

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/assets/sass/abstracts/variables.sass";`
      }
    }
  }
}
Related