Vue CSS Модули - PullRequest
Новая
       23

Vue CSS Модули

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

Я пытался найти решение для нашей библиотеки компонентов, которое будет отображать стили по-разному в зависимости от проекта, в который он импортирован.В своем исследовании я нашел возможное решение в модулях CSS.Проблема, с которой я сейчас сталкиваюсь, заключается в том, что когда я использую именованные модули, они компилируются в один и тот же класс CSS, поэтому стили в двух разных именованных модулях перезаписывают друг друга.Документация на сайте Vue очень скудная, поэтому я не уверен, правильно ли я сейчас реализую свой код.Может кто-нибудь сообщить мне, если я что-то упустил или у них уже была похожая проблема? 

<template>
  <button :class="a.button" type="button" v-on="$listeners">
    <slot/>
  </button>
</template>

<script>
export default {
  console.log(this.a, this.b)
}
</script>

<style module="a">
.button {
  background-color: red;
}
/* identifiers injected as a */
</style>

<style module="b">
.button {
  background-color: blue;
}
/* identifiers injected as b */
</style>

В моем console.log(this.a, this.b) консоль так ясно возвращает оба отображаемых имени класса как одно и то же {button: "index_button_2JdpP"} {button: "index_button_2JdpP"}в моем коде есть проблема, или я неправильно понимаю цель присвоения имени модулю CSS.

1 Ответ

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

Я нашел способ обойти, импортировав CSS-файлы в мой сценарий и установив мои стили с помощью вычисляемого свойства. 

<template>
  <button type="button" :class="styles.button" v-on="$listeners">
    <slot/>
  </button>
</template>

<script>
import remax from './remax.scss'
import crm from './crm.scss'

export default {
  computed: {
    styles() {
      return remax
    },
  }
}
</script>

<style modules lang="scss"></style>

К сожалению, выполнение таких действий привело к тому, что некоторые стили стали частью моего проекта, но это может быть связано ск моей реализации в файле scss.

...