Vue.js vue.config.js-加载多个.scss文件以供全局使用

我的Vue项目中有三个.scss文件

我已经导入到我的主要应用程序组件中的主要全局组件。 然后，另外两个是容器变量，使用这样的容器变量不可能同样重要，因为找不到变量

因此，我创建了一个vue.config.js文件，并添加了-

module.exports = {
css: {
  loaderOptions: {
    sass: {
      data: `@import "@/styles/_variables.scss";`
    },
  }
}
};

问题是，这会导入我的_variables.scss文件，但我还想导入一个_other.scss文件（来自同一文件夹）

我不知道如何构造它，以便它同时导入和使用这两者

@import "@/styles/_variables.scss"; @import "@/styles/_other.scss"

---

工作得很好。但是导入到一个大文件并加载它也是如此。

如果您使用的是sass loader 8或更高版本，则需要使用prependData而不是data。例如：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/styles/_variables.scss";
          @import "@/styles/_variables2.scss";
        `
      }
    }
  }
};

---

@import“@/styles/_variables.scss”@导入“@/styles/_other.scss”

您可以在一个主文件中导入其他scss文件，只需导入主scss文件即可