使用 Vite 构建 Vue2+Vuetify 应用程序时覆盖 Vuetify 变量

Question

我正在尝试将 Vue2+Vuetify 应用程序从 Vue-CLI/Webpack 迁移到 Vite。该应用程序有几个 SCSS 文件，main.scss 和 variables.scss，后者由前者导入。

main.scss

@import 'variables';
// global style rules (omitted)

变量.scss

// override some Vuetify variables and defined some variables of my own, e.g.
// Vuetify default is 48px
$data-table-mobile-row-min-height: 32px;

// Increase default height by 10px
// https://vuetifyjs.com/en/api/v-date-picker/#sass-variables
$date-picker-table-height: 252px;

main.scss是在根组件中导入的，也就是说：

1. main.scss 中的规则适用于每个组件
2. variables.scss 中的变量可以在任何组件中引用，无需任何额外的导入
3. Vuetify 定义的变量可以在任何组件中引用，无需任何额外的导入
4. variables.scss 中的变量会覆盖同名的 Vuetify 变量

但是，在迁移到 Vite 之后，只有 (1) 仍然有效。通过将以下内容添加到vite.config.js

，我能够解决 (2) 和 (3)

export default defineConfig({
  // other config omitted

  css: {
    preprocessorOptions: {
      scss: {
        // Make the variables defined in these files available to all components, without requiring an explicit
        // @import of the files themselves
        additionalData: `@import "./src/styles/variables"; @import "vuetify/src/styles/settings/_variables";`
      },
    },
  },
});

但是，情况仍然是 (4) 不再有效。

据我所知，使用 Vue-CLI 构建时，vuetify-loader 负责此行为，但不清楚在使用 Vite 构建时如何覆盖 Vuetify 变量？

Answer 1

这是通过unplugin-vue-components 实现的，Vite 等效于vuetify-loader。

将 Vite 配置为使用 unplugin-vue-components 及其 Vuetify 解析器，它会在使用时自动导入 Vuetify 组件和样式（如 vuetify-loader）：

// vite.config.js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { VuetifyResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ⋮
    Components({
      resolvers: [VuetifyResolver()],
    }),
  ],
})

注意：默认启用SCSS缩进语法，所以additionalData不能包含分号，每行必须以换行符结尾：

// vite.config.js
export default defineConfig({
  css: {
    preprocessorOptions: {
      sass: {
        // ❌ no semicolons for indented syntax
        // additionalData: `@import "./src/styles/variables"; @import "vuetify/src/styles/settings/_variables";`

        // ✅
        additionalData: [
          '@import "./src/styles/variables"',
          '@import "vuetify/src/styles/settings/_variables"',
          '', // end with newline
        ].join('\n'),
      },
    },
  },
})

Vuetify 插件设置应该从vuetify/lib/framework 导入而不是从vuetify，并且它应该不导入默认的 Vuetify CSS：

// plugins/vuetify.js
import Vue from 'vue'

// ❌ defeats dynamic imports from unplugin-vue-components
// import Vuetify from 'vuetify'
// import 'vuetify/dist/vuetify.min.css'

// ✅
import Vuetify from 'vuetify/lib/framework'

Vue.use(Vuetify)

export default new Vuetify({/* options */})

demo