web-dev-qa-db-fra.com

Comment remplacer les variables Vuetify par des couleurs personnalisées?

Je veux remplacer les variables vuetify avec des couleurs personnalisées en suivant this

J'ai créé un dossier de stylets contenant le dossier de base (_colors, _typography) et main.styl fichier. Le _color le fichier est importé dans main.styl fichier, ce dernier est importé dans main.js

Voici ma structure de fichiers: entrez la description de l'image ici

Et les importations sont incluses dans main.js:

 import '../node_modules/vuetify/dist/vuetify.min.css'
 import './assets/stylus/main.styl'

À l'intérieur de _color.styl, J'ai ce code de test:

$red = {
  "base":       #FF0000,
  "darken-1":   #e50000,
  "darken-2":   #990000,
  "darken-3":   #7f0000,
  "darken-4":   #000000,
}

Les couleurs personnalisées ne s'affichent pas ... manque-t-il quelque chose ici?

stylusvuetify.js
7
stormynpip

Comme @webdevdani l'a mentionné, je ne pense pas qu'il soit possible de remplacer le style vuetify.

Je vous propose une solution: utilisez un theme.

Dans votre main.js vous pouvez définir des couleurs, comme ceci:

Vue.use(Vuetify, {
  theme: {
    primary: '#FFA726',
    secondary: '#29B6F6',
    anyColor: '#0000'
})

Et vous pourrez l'appeler ainsi dans n'importe quel composant de votre application:

color="primary"

ou

color="anyColor"

Source et plus d'informations sur le thème Vuetify

6
Toodoo

Vous devez déclarer les variables avant d'importer Vuetify. Changer l'ordre des importations devrait fonctionner, en supposant que main.styl Importe votre _color.styl Modifié.

Citation de la documentation :

Maintenant que le stylet est configuré, vous pouvez définir des valeurs par défaut pour les variables de stylet que vous souhaitez modifier. Celles-ci doivent être déclarées avant l'importation et remplaceront automatiquement les valeurs par défaut de Vuetify.

Vous pouvez voir toutes les variables dans lesquelles vous pouvez changer ici .

0
FINDarkside