Scoped css не применяется с lang = "s css" - PullRequest
Новая
       59

Scoped css не применяется с lang = "s css"

1 голос
/ 30 апреля 2020

Я использую Quasar и пытаюсь стилизовать q-table первый столбец: 

<style lang="scss" scoped>
td:first-child {
  background-color: #747480 !important;
}
</style>

Однако это не работает даже после перезагрузки / горячей перезагрузки / перезапуска сервера.

Удаление работает нормально. Я понятия не имею, что происходит. Кто-нибудь может обеспечить решение этой проблемы?

РЕДАКТИРОВАТЬ: Здесь работает демо:

Codesandbox

Просто удалите scoped из стиля, и цвет будет изменить.

Ответы [ 2 ]

1 голос
/ 05 мая 2020

Предупреждение об использовании: >>> с lang="scss"!

В то время как >>>, кажется, работает как ожидается, когда lang не указано (или когда установлено css), то же самое не верно для lang="scss".

Единственные проникающие селекторы, которые работают с lang="scss" (в последних 2.x Vue - v2.6.11), являются /deep/ и ::v-deep.
Что я точно знаю, так это то, что он не связан с пакетами node-sass или dart-sass, как я пробовал с обоими, и он ведет себя одинаково. Так что либо на уровне пакета Vue, либо на уровне пакета sass. Но я не считаю, что понижение какой-либо из этих версий является возможным решением

По какой-то причине >>> преобразуется в > > > при использовании в scss, что по понятным причинам делает что-либо внутри этого кодовый блок больше не применяется. То, что должно произойти, должно быть удалено >>>, и к любым частям селектора после этой точки больше не должен применяться атрибут scoping (как это происходит для двух других селекторов с прокалыванием).

Обратите внимание, что он работал и я понятия не имею, когда или почему он перестал работать (лично я всегда предпочитал ::v-deep, без особой причины).

В вашем случае: просто оберните все в ::v-deep {}: 

<style lang="scss" scoped>
  ::v-deep {
    td:first-child {
      background-color: #747480; /* no need for !important */
    }
    .q-table tbody td {
      white-space: normal;
    }
  }
</style>

... и они будут применяться.

Посмотрите, как это работает здесь: https://codesandbox.io/s/cranky-snow-ruf3w?file= / src / pages / Index. vue

1 голос
/ 05 мая 2020

Используйте глубокий селектор в стиле scoped

В своем коде добавьте "id" в свою q-таблицу 

<q-table
    title="Treats"
    :data="data"
    :columns="columns"
    row-key="name"
    dark
    color="amber"
    id="my-table"
        />

И затем измените свой стиль в как этот 

<style scoped>
  #my-table >>> td:first-child {
    background-color: #1313eb !important;
  }

 .q-table tbody td {
    white-space: normal;
 }
</style>
...