Vite로 Vue2+Vuetify 앱을 빌드할 때 Vuetify 변수 재정의

Vite로 Vue2+Vuetify 앱을 빌드할 때 Vuetify 변수 재정의

Vue2+Vuetify 앱을 Vue-CLI/Webpack에서 Vite로 마이그레이션하려고 해.앱에 SCSS 파일이 몇 개 있는데main.scss그리고variables.scss후자가 전자가 수입하여

main.scss

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

variable.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)만이 여전히 효과가 있었다.다음을 덧붙여 (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로 건물을 지을 때 부에티파 로더가 이런 행동을 담당하는데, Vite로 건물을 지을 때 부에티파 변수를 어떻게 오버라이드하는지는 명확하지 않은 것으로 알고 있다.

이 작업은 와 동등한 Vite 를 사용하여 수행된다.vuetify-loader.

사용할 Vite 구성unplugin-vue-components사용 시 자동으로 Vuetify 구성 요소와 스타일을 가져오는 Vuetify resolver와 함께(예: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 */})

데모를 하다

참조URL: https://stackoverflow.com/questions/70656230/overriding-vuetify-variables-when-building-a-vue2vuetify-app-with-vite