Вложение правил SCSS в модули VueJS - PullRequest
Новая
       14

Вложение правил SCSS в модули VueJS

0 голосов
/ 27 февраля 2019

Как я могу обрабатывать вложенные правила SCSS, которые расширяют базовый стиль, при работе с модулями CSS для импорта стилей в локальный компонент?

В моем случае у меня есть два следующих файла SCSS:

icon.scss 

.my-icon {
  // base styles for an icon
}

button.scss 

.my-button {
  ...
  .my-icon {
    // special styles when an icon is in a button
  }
}

которые я затем импортирую в соответствующие компоненты:

MyIcon.vue 

<template><i class="my-icon" /></template>
<style lang="scss" module>
@import '/path/to/icon.scss'
</style>

MyButton.vue 

<template><button class="my-button"><slot /></button></template>
<style lang="scss" module>
@import '/path/to/button.scss'
</style>

Беда в том, что nested .my-icon class в 'button.scss' генерирует хеш ('._2XJ5'), отличный от корневого .my-icon class, в 'icon.scss' (._2UFd).Поэтому, когда я пытаюсь внедрить значок в кнопку, я получаю вывод, который выглядит следующим образом: 

<button class="._3S2w"><i class="._2UFd" /></button>

Это правильно, но «специальные стили» для значка в кнопке не применяются,потому что этот класс был сгенерирован как другой хеш.

Как мне убедиться, что значение хеша для '.my-icon' всегда получается одинаковым?

1 Ответ

0 голосов
/ 27 февраля 2019

Где-то, спрятанная глубоко в загрузчике Vue, документация кратко рассказывает о том, как вы можете избежать стилевого оформления.Решение состоит в том, чтобы использовать a / deep / selector , который предварительно обрабатывается scss, чтобы все, что стоит за ним, не хэшировалось.В обычном css есть что-то похожее, но оно несколько не связано.

Скажем, у нас есть наш my-button компонент и мы хотим стилизовать my-icon классы внутри него, мы можем сделать следующее: 

<template>
  <div>
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
/deep/ .my-icon {
  background: red;
}
</style>

Следующее должно генерировать что-то вроде следующего.Он все еще находится в пределах вашего компонента, но .my-icon не обязательно должен быть частью вашего компонента.В этом случае он может быть внутри слота, например. 

[data-v-f3f3eg9] .my-icon {
  background: red;
}
...