为每个Vue组件自动导入SCSS文件

Question

您好，我尝试全局导入我的 vue.config.js 的变量.scss 文件 [在此输入图像描述][1]

变量.scss [在此输入图像描述][2]

以及我尝试使用它的 vue 文件 [在此输入图像描述][3]

当我直接在vue文件中导入variables.scss时，一切正常，但全局导入不起作用

知道什么问题吗？

我使用：“sass”：“^1.69.5”，“sass-loader”：“7.3.1”，“vue”：“^3.2.26”，

我希望variables.scss中的变量在所有vue文件中全局工作

Answer 1

您可以将文件路径添加到 vue.config.js 文件中的 scss 文件。这是一个例子：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@use "@/assets/scss/variables/variables.scss" as *;`
      },
    },
  },
};