Question

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

主要全局对象，已导入到我的主要应用程序组件。然后，另外两个是容器变量，并且容器变量不能以相同的方式发挥重要作用，因为找不到该变量。

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

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

问题是，导入了_variables.scss文件，但我也想导入_other.scss文件（从同一文件夹中）。

我无法弄清楚如何构造它以使其导入和使用。

Answer 1

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

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

Answer 2

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

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

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

2 个答案: