Estoy intentando migrar una aplicación Vue2+Vuetify de Vue-CLI/Webpack a Vite. La aplicación tiene un par de archivos SCSS, main.scss y variables.scss con el último importado por el primero.
@import 'variables'; // global style rules (omitted) // override some Vuetify variables and defined some variables of my own, eg // 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 se importa en el componente raíz, lo que significa que:
main.scss se aplican a cada componentevariables.scss en cualquier componente sin importaciones adicionalesvariables.scss anulan las variables de Vuetify con el mismo nombre Sin embargo, después de migrar a Vite, solo (1) seguía funcionando. Pude resolver (2) y (3) agregando lo siguiente a 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";` }, }, }, });Sin embargo, todavía se da el caso de que (4) ya no funciona.
Hasta donde yo sé, el cargador vuetify es responsable de este comportamiento cuando se construye con Vue-CLI, pero no está claro cómo anular las variables de Vuetify cuando se construye con Vite.
Esto se logra con unplugin-vue-components , el equivalente Vite de vuetify-loader .
Configure Vite para usar unplugin-vue-components con su resolución Vuetify, que importa automáticamente los componentes y estilos de Vuetify al usarlos (como 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()], }), ], }) Nota: la sintaxis con sangría SCSS está habilitada de forma predeterminada, por lo que los datos additionalData no deben contener punto y coma, y cada línea debe terminar con el carácter de nueva línea:
// 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'), }, }, }, }) La configuración del complemento de Vuetify debe importarse desde vuetify/lib/framework en lugar de desde vuetify , y no debe importar el CSS predeterminado de Vuetify:
// 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 */})