Vuetify 没有 vue-cli sass/scss 冲突

我需要将 vuetify 集成到一个无法使用 vue cli 且具有以下 css/sass webpack 配置的项目中。

{
    test: /\.s?[ac]ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {url: false, sourceMap: true}
      },
      {
        loader: 'sass-loader',
        options: {sourceMap: true}
      }
    ]
}

来自文档的 Vuetify 配置

{
    test: /\.s(c|a)ss$/,
    use: [
      'vue-style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          implementation: require('sass'),
          // webpackImporter: false,
          sassOptions: {
            fiber: require('fibers'),
            indentedSyntax: true
          },
          prependData: "@import 'src/novosales/variables/scss/vuetifyCustomStyles.scss'"
        }
      }
    ]
}

合并到现有配置后

{
    test: /\.s?[ac]ss$/,
    use: [
      'vue-style-loader',
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {url: false, sourceMap: true}
      },
      {
        loader: 'sass-loader',
        options: {
          implementation: require('sass'),
          sourceMap: true,
          sassOptions: {
            fiber: require('fibers'),
            indentedSyntax: true
          },
          prependData: "@import 'src/novosales/variables/scss/vuetifyCustomStyles.scss'",
        }
      }
    ]
}

我收到错误

在尝试解决问题时，我也遇到了（预期换行）错误，但现在无法生成它。

我在网上找到了一个解决方案，但那是使用 vue cli 时的解决方案

// vue.config.js
css: {
  loaderOptions: {
    sass: {
      data: '@import "~@/sass/main.scss"',
      implementation: require("sass"),
      fiber: require("fibers")
    }
  },
  sourceMap: true
},
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 '~@/sass/main.scss';` }))
  });
}

我不知道如何在这个项目中实现相同的目标并分离 sass/scss。 有人已经在没有 vue cli 的情况下使用 vuetify 了吗？谢谢。