Vuetify가 기본 CSS를 덮어쓰지 않도록 하는 방법

Vuetify가 기본 CSS를 덮어쓰지 않도록 하는 방법

문제를 정리하다

기존 프로젝트의 일부에 Vuetify를 구현하려고 합니다.하지만 Vuetify를 프로젝트에 추가한 후입니다.like 입력 필드, select의 "기본" CSS 스타일이 변경되었음을 알게 되었습니다.입력 필드 및 선택 모두 입력 필드가 아닌 일반 텍스트처럼 보이게 합니다.

프로젝트의 일부만 Vuetify를 구현하고 싶기 때문에 Vuetify가 "기본" CSS 규칙을 덮어쓰는 것은 좋지 않습니다.

기존 프로젝트의 일부에 Vuetify를 구현할 방법을 찾고 있습니다.그러나 나머지 프로젝트는 정상적으로 진행되어야 합니다(자신의 CSS가 아닌 기본 CSS만 사용).

큐스티온을 좀 더 선명하게 하기 위해 두 가지 선택을 보여주는 예를 들어 보겠습니다.첫 번째는 Vuetify로 만들었습니다.<v-select>그리고 두 번째는 일반 HTML 코드로 만들어졌어요.<select>

배경 설명 및 이미 시도한 내용을 알려 주십시오.

입력 필드에 커스텀 CSS 규칙을 삽입하고 Vuetify Script와 Vuetify CSS 링크 뒤에 선택하려고 이미 시도했습니다.하지만 Vuetify는 여전히 제 커스텀 CSS-Styles보다 우선합니다.

코드 표시

HTML 부품:

<div id="app">
  <div>Vuetify select:</div>
  <v-select
    :items="items"
  >
  </v-select>
  <hr/>
  <div>
    <div>Normal select:</div>
    <select>
      <option value="0">test1</option>
      <option value="1">test2</option>
      <option value="2">test3</option>
    </select>
  </div>
</div>

JS 부품:

new Vue({
  el: '#app',
  data() {
    return {
      item: null,
      items: [
        {
          text: "a"
        },
        {
          text: "b"
        },
        {
          text: "c"
        },
      ]
    }
  }
})

예상된 결과와 실제 결과를 설명합니다.

저는 Vuetify를 이 프로젝트의 일부에 사용할 수 있을 것으로 기대했습니다.그러나 그 사이에 나머지 프로젝트는 정상적으로 동작해야 합니다(디폴트 CSS).

이는 Vuetify 재설정 스타일()src/styles/generic/_reset.scss로 인해 발생합니다.

이 문제에 대한 문제도 있습니다.https://github.com/vuetifyjs/vuetify/issues/8530mkalus의 작은 postcss hack을 찾을 수 있습니다.이 hack은 래퍼를 통해 필요한 스타일을 분리합니다(프리픽스클래스를 셀렉터에 추가).

제 경우, 제가 직접 추가한 것을 제외한 일부 요소 선택기를 제거해야 했습니다.이것이 postcss-filter-rules 플러그인을 사용한 mkalus 솔루션의 변형입니다.

제가 사용한 것은filter옵션을 사용하여 선택기를 필터링합니다.설명:

함수가 반환되는 경우 선택기가 유지됩니다.true그렇지 않으면 삭제됩니다.

그리고 그keepAtRules불필요한 삭제를 방지하는 옵션:

디폴트로는@font-face및 (필터링 후) 빈 at-filtering이 모두 삭제됩니다.특정 규칙을 유지하려면 이 옵션에 이름 배열을 지정하십시오.모든 규칙을 유지하려면 다음 값을 사용합니다.true.

vue.config.js(Vue CLI 4):

const autoprefixer = require('autoprefixer')
const filterRules = require('postcss-filter-rules')

module.exports = {
  /* ... */
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          filterRules({
            filter: (selector) => {
              const re = new RegExp(/^(html|body|\*|ul|ol|select|small)(\W|$)/, 'i')
              const exception  = '.vue-global'
              return !re.test(selector) || selector.includes(exception)
            },
            keepAtRules: true
          }),
          autoprefixer
        ]
      }
    }
  }
  /* ... */
}

스타일은 Vuetify 리셋 스타일은 할 수 .html다음과 같이 합니다.

html.vue-global
  font-size 16px

프로젝트에 정규화된 css 파일을 추가할 수 있으며 vuetify 스타일은 원할 때만 적용됩니다.

언급URL : https://stackoverflow.com/questions/54293336/how-to-avoid-vuetify-overrides-default-css