Vue2+Vuetify2添加Rally预设失败及配置报错求助

问题背景 #

在Vue2项目中使用Vuetify2，通过vue add vuetify-preset-rally安装Rally预设后，按官方文档配置vuetify.js，出现编译错误。尝试直接传入预设路径字符串，问题依旧。后续添加vue.config.js配置webpack后，又触发新的webpack配置验证错误。

相关配置代码 #

vuetify.js 初始配置

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import { preset } from 'vue-cli-plugin-vuetify-preset-rally/preset'

Vue.use(Vuetify);

export default new Vuetify({
  preset,
  rtl: true,
  theme: { dark : true}
});

package.json 依赖配置

{
  "name": "salescore",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuetify": "^2.6.0",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "~2.5.8",
    "vue-cli-plugin-vuetify-preset-rally": "~1.0.4",
    "vue-template-compiler": "^2.6.14",
    "vuetify-loader": "^1.7.0"
  }
}

错误的vue.config.js 配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: [
    'vuetify'
  ],

  configureWebpack: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true // optional
            },
            // Requires >= sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },
    ],
  }
})

核心错误原因 #

1. Sass Loader 配置项不兼容 #

报错提示options has an unknown property 'prependData'，原因是：

• sass-loader@10.0.0已将旧版的prependData选项重命名为additionalData
• vue-cli-plugin-vuetify-preset-rally插件生成的配置仍在使用旧的prependData，导致schema验证失败

2. Webpack 配置重复定义 #

vue.config.js中sass-loader的配置里重复写了两次options属性，webpack不允许同一个loader配置存在重复的options字段，触发配置验证错误。

解决方案 #

步骤1：保持vuetify.js的正确配置 #

原导入方式无需修改，是符合要求的：

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import { preset } from 'vue-cli-plugin-vuetify-preset-rally/preset'

Vue.use(Vuetify);

export default new Vuetify({
  preset,
  rtl: true,
  theme: { dark: true }
});

步骤2：重构vue.config.js配置 #

使用chainWebpack修改现有sass规则，替换旧的配置项，避免重复定义：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: ['vuetify'],
  chainWebpack: config => {
    // 处理sass（缩进语法）规则
    config.module.rule('sass')
      .use('sass-loader')
      .tap(options => {
        // 替换prependData为additionalData
        if (options.prependData) {
          options.additionalData = options.prependData
          delete options.prependData
        }
        // 确保使用正确的sass实现和配置
        options.implementation = require('sass')
        options.sassOptions = { indentedSyntax: true }
        return options
      })

    // 处理scss规则（如果项目中使用scss）
    config.module.rule('scss')
      .use('sass-loader')
      .tap(options => {
        if (options.prependData) {
          options.additionalData = options.prependData
          delete options.prependData
        }
        options.implementation = require('sass')
        return options
      })
  }
})

步骤3：清除缓存并重新编译 #

执行以下命令清除依赖缓存，重新安装并启动项目：

rm -rf node_modules package-lock.json
npm install
npm run serve

补充方案（备选） #

如果上述方法无效，可以临时降级sass-loader到v8版本（适配插件的旧配置），但不推荐长期使用：

npm install sass-loader@8.0.2 --save-dev

内容的提问来源于stack exchange，提问作者mustafa00