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

Question

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

main.scss

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

variables.scss

// override some Vuetify variables and define 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是在根组件中导入的，也就是说：

main.scss 中的规则应用于每个组件
variables.scss 中的变量可以在任何组件中引用而无需任何额外的导入
Vuetify 定义的变量可以在任何组件中引用，无需任何额外导入
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

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

Overriding Vuetify variables when building a Vue2+Vuetify app with Vite

vue.js

sass

vuejs2

vuetify.js

vite

main.scss

variables.scss