2

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

这是我的 main.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来实现上述内容。

4

2 回答 2

1

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

module.exports = {
css: {
    loaderOptions: {
      scss: {
         data: `
            @import "~@/assets/scss/main.scss";
            @import "~@/assets/scss/custom.scss";
            `,
        },
    },
},
于 2019-09-10T08:59:33.583 回答
0

使用chainWebpack代码，

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

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

tap(opt => Object.assign(opt, { prependData: `@import '~@/assets/scss/style.scss'` }))
于 2019-12-03T21:18:55.110 回答