从不同的文件夹 Vue JS 访问 sass 变量

Question

我尝试创建组件ButtonFilled.vue，我想在这个组件上设置 sass 样式并像这样访问 sass 变量

但是我遇到了这个错误，有什么解决办法吗？

这是我的main.js 文件

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");

这是我的master.sass

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

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

Answer 1

我在vue.config.js 及其作品上使用它，谢谢大家

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