Vue3+Vuetify+SCSS执行npm run serve时出现无效依赖警告

环境信息 #

Node.js: 18.18.0
Vue: 3.4.21
Vuetify: 3.7.2
Vue CLI: 5.0.8
sass: ^1.72.0
sass-loader: ^14.1.1

错误警告信息 #

执行npm run serve启动项目后，收到多条关于Vuetify SCSS文件的无效依赖警告，示例如下：

warning  in ./node_modules/.cache/vuetify/lib/directives/ripple/VRipple.sass

Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "D:/Constr/test/dio/frontend/node_modules/.cache/vuetify/lib/directives/ripple/VRipple.sass"

这些警告涉及node_modules/.cache/vuetify下多个.sass文件，关联VTextField、VTextarea、VVirtualScroll等Vuetify组件。

当前 vue.config.js 配置（其他设备正常，本地异常） #

const { VuetifyPlugin } = require('webpack-plugin-vuetify');

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    plugins: [
      new VuetifyPlugin({
        autoImport: true,
        styles: { configFile: 'src/assets/styles/settings.scss' },
      }),
    ],
  },
  devServer: {
    port: 8080,
    proxy: process.env.VUE_APP_BASE_API,
  },
  productionSourceMap: false,
  transpileDependencies: ['vuetify'],
};

已尝试的解决措施 #

• 清除Vuetify缓存
• 重新安装项目依赖
• 测试vue.config.js的不同配置组合
• 将Vuetify升级至3.7.2版本
• 移除styles配置后警告消失，但自定义样式失效

参考网络建议修改的无效配置 #

const { VuetifyPlugin } = require('webpack-plugin-vuetify');
const path = require('path');

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
    plugins: [
      new VuetifyPlugin({
        autoImport: true,
        styles: { configFile: path.resolve(__dirname, 'src/assets/styles/settings.scss') },
      }),
    ],
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/styles/settings.scss";`,
        sassOptions: {
          includePaths: [path.resolve(__dirname, 'src/assets/styles')],
        },
      },
    },
  },
  chainWebpack: (config) => {
    config.module
      .rule('scss')
      .oneOf('normal')
      .use('sass-loader')
      .tap((options) => {
        options.sassOptions = {
          includePaths: [path.resolve(__dirname, 'src/assets/styles')],
        };
        return options;
      });
  },
  devServer: {
    port: 8080,
    proxy: process.env.VUE_APP_BASE_API,
  },
  productionSourceMap: false,
  transpileDependencies: ['vuetify'],
};

内容的提问来源于stack exchange，提问作者Олег Гор_