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

Question

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

主文件

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

变量.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被导入到根组件中，这意味着：

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

然而，迁移到Vite后，只有（1）仍然有效。我能够通过添加以下内容来解决（2）和（3）vite.config.js

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-componentsVite 的等效项来完成的vuetify-loader。

\n

配置 Vite 以与其 Vuetify 解析器一起使用unplugin-vue-components，该解析器在使用时自动导入 Vuetify 组件和样式（如vuetify-loader）：

\n

// vite.config.js\nimport { defineConfig } from \'vite\'\nimport Components from \'unplugin-vue-components/vite\'\nimport { VuetifyResolver } from \'unplugin-vue-components/resolvers\'\n\nexport default defineConfig({\n  plugins: [\n    \xe2\x8b\xae\n    Components({\n      resolvers: [VuetifyResolver()],\n    }),\n  ],\n})\n

\n

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

\n

// vite.config.js\nexport default defineConfig({\n  css: {\n    preprocessorOptions: {\n      sass: {\n        // \xe2\x9d\x8c no semicolons for indented syntax\n        // additionalData: `@import "./src/styles/variables"; @import "vuetify/src/styles/settings/_variables";`\n\n        // \xe2\x9c\x85\n        additionalData: [\n          \'@import "./src/styles/variables"\',\n          \'@import "vuetify/src/styles/settings/_variables"\',\n          \'\', // end with newline\n        ].join(\'\\n\'),\n      },\n    },\n  },\n})\n

\n

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

\n

// plugins/vuetify.js\nimport Vue from \'vue\'\n\n// \xe2\x9d\x8c defeats dynamic imports from unplugin-vue-components\n// import Vuetify from \'vuetify\'\n// import \'vuetify/dist/vuetify.min.css\'\n\n// \xe2\x9c\x85\nimport Vuetify from \'vuetify/lib/framework\'\n\nVue.use(Vuetify)\n\nexport default new Vuetify({/* options */})\n

\n

演示

\n