在 Vue 3 中使用 npm runserve 时出现 SCSS 和 Vuetify 问题 — 无效依赖项

Question

我在运行使用 Vuetify 和 SCSS 的 Vue 3 项目时遇到了问题。该项目是使用 npm runserve 命令启动的，我收到多个有关 Vuetify SCSS 文件“无效依赖项”的警告。

环境：

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

错误：

 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 文件。该错误发生在与 Vuetify 组件相关的文件中，例如 VTextField、VTextarea、VVirtualScroll 等。

这是我当前的 vue.config.js，它可以在除我的 PC 之外的任何地方运行：

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'],
};

我尝试过：

1. 清除 Vuetify 缓存。
2. 重新安装依赖项。
3. 在 vue.config.js 中测试不同的配置。
4. 将 Vuetify 更新到版本 3.7.2。
5. 删除线条样式：{ configFile: 'src/assets/styles/settings.scss' }。错误消失，但部分样式损坏。

例如，我根据网上的建议更改了配置，就像这样，但也没有帮助：

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'],
};

Answer 1

请尝试像这样更改你的 vue.config.js 。

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,
        cache: false,
        styles: { configFile: path.resolve(__dirname, 'src/assets/styles/settings.scss') }, // Ensures absolute path
      }),
    ],
  },
  css: {
    loaderOptions: {
      scss: {
        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'],
};

如果此配置不起作用，请查看此链接中的 vuetify 问题。

https://github.com/vuetifyjs/vuetify/issues