vue.js - 错误 : Undefined variable in VueJS

Question

我被困在这个问题上，需要一些帮助。我尝试搜索类似的问题，但找不到合适的解决方案。问题很简单:我的组件无法访问我的 variables.scss 文件，除非我直接导入它 - 这样我需要在我的项目的每个组件中这样做......必须有另一种方式。到目前为止，这是我的项目结构:我创建了一个 global.scss 文件，它导入了我的 variables.scss 文件 here global.scss 被导入 App.vue here

如果每个组件都有变量文件的特定导入，问题就解决了: here

一定有更顺畅的方式。

希望有人能帮我解决这个问题!

Answer 1

如果你使用 webpack，你可以使用 sass 加载器的 additionalData 选项自动导入你的变量到每个组件中

https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders

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