Vue.js 在vue.config.js中重写saas变量时重复自定义scss代码的问题

我要做的是建立一个结构，在这里我可以覆盖Vuetify变量值。问题是，当我导入带有自定义类的自定义scss文件时，它会重复多次。准确地说，总共92次

我能够覆盖变量，这没有问题，但我编写的自定义css会重复多次

这是我的vue.config.js文件代码

const path = require('path');
const webpack = require('webpack');

module.exports = {
css: {
    loaderOptions: {
      scss: {
         data: `@import "~@/assets/scss/main.scss"`,
          },
    scss: {
    data: `@import "~@/assets/scss/custom.scss"`,
        },
    },
},
chainWebpack: config => {
    ["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
      config.module.rule('scss').oneOf(match).use('sass-loader')
         .tap(opt => Object.assign(opt, { data: `@import '~@/assets/scss/style.scss'` }))
    })
 }
};

// src/sass/main.scss
// Any changes to a default variable must be
// declared above the initial style import
@import '~vuetify/src/styles/styles.sass';

$font-size-root: 20px;

// Required for modifying core defaults

// Any component modifications must be imported
@import '~vuetify/src/components/VBtn/_variables.scss';

@import '~vuetify/src/components/VList/_variables.scss';

这是我的main.scss文件代码

const path = require('path');
const webpack = require('webpack');

module.exports = {
css: {
    loaderOptions: {
      scss: {
         data: `@import "~@/assets/scss/main.scss"`,
          },
    scss: {
    data: `@import "~@/assets/scss/custom.scss"`,
        },
    },
},
chainWebpack: config => {
    ["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
      config.module.rule('scss').oneOf(match).use('sass-loader')
         .tap(opt => Object.assign(opt, { data: `@import '~@/assets/scss/style.scss'` }))
    })
 }
};

// src/sass/main.scss
// Any changes to a default variable must be
// declared above the initial style import
@import '~vuetify/src/styles/styles.sass';

$font-size-root: 20px;

// Required for modifying core defaults

// Any component modifications must be imported
@import '~vuetify/src/components/VBtn/_variables.scss';

@import '~vuetify/src/components/VList/_variables.scss';

我已经尝试在vue.config.js文件中提供一个路径（main.scss），然后在main.scss中进一步导入custom.scss，但它会给出相同的重复结果。我做错了什么？还是我错过了什么？

---

Ps：我尝试按照此链接实现上述操作。

您可能应该将import语句组合成一个字符串：

module.exports = {
css: {
    loaderOptions: {
      scss: {
         data: `
            @import "~@/assets/scss/main.scss";
            @import "~@/assets/scss/custom.scss";
            `,
        },
    },
},

---

使用chainWebpack代码

sass加载程序：8使用

prependData

而不是

data

如果将tap方法调用替换为：

tap(opt => Object.assign(opt, { prependData: `@import '~@/assets/scss/style.scss'` }))

---

谢谢你的建议，但我已经试过了，它会产生错误，说明不允许使用半克隆。是的，我试过了，还有chainWebpack代码，仍然没有帮助。