在 vue.config.js 中覆盖 saaS 变量时重复自定义 scss 代码的问题

Question

我正在尝试做的是建立一个结构，我可以在其中覆盖 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'` }))
})
}
};

这是我的主.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：我尝试点击此链接 https://vuetifyjs.com/en/customization/sass-variables 以暗示上述内容。

Answer 1

您可能应该将导入语句合并为单个字符串：

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

Answer 2

使用 chainWebpack 代码，

sass-loader：8 使用prependData而不是data

如果将 tap 方法调用替换为，会发生什么情况：

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