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

【问题标题】：vue.config.js - Loading Multiple .scss files for global usevue.config.js - 加载多个 .scss 文件以供全局使用
【发布时间】：2019-09-13 13:43:04
【问题描述】：

我的 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"
您可以在一个主文件中导入其他scss文件，只需导入主scss文件

标签： vue.js webpack

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

完美运行。但是导入一个大文件并加载它也是如此。

【讨论】：