Access the sass variable from a different folder Vue JS

Question

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

but i qot this error, any solution?

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"

kurakura · Accepted Answer · 2020-12-25 13:57:19Z

1

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

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

answered Dec 25, 2020 at 13:57

kurakura

1861 silver badge18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Access the sass variable from a different folder Vue JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related