Discussion :

[bndd24]

Bonjour,

Je rencontre un petit problème.. J'utilise Bootstrap dans Symfony et j'ai remarqué que je n'ai aucun fond de couleur qui s'affiche pour les éléments de Bootstrap ! Je ne sais pas comment être plus clair dans mes explications..

par exemple le code ci dessous doit avoir un fond vert, nous sommes d'accord ! pourtant je n'ai aucun fond..

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="alert alert-success" role="alert">
    A simple info alert—check it out!
</div>

Je ne sais même pas quoi vous dire d'autre pour aguiller..
- Oui je charge bien le css correspondant a cet élément.. (j'utilise Symfony Encore avec Sass)

Voici mon fichier app.scss

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// customize some Bootstrap variables
$theme-colors: (
  "primary": #6f42c1
);
 
// scss-docs-start import-stack
// Configuration
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
 
// Layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/accordion";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/offcanvas";
 
// Helpers
@import "~bootstrap/scss/helpers";
 
// Utilities
@import "~bootstrap/scss/utilities/api";
// scss-docs-end import-stack

Voici mon fichier twig de test..

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% extends 'base.html.twig' %}
 
{% block title %}Modifier mon mot de passe{% endblock %}
 
{% block body %}
 
<div class="alert alert-success" role="alert">
    A simple info alert—check it out!
</div>
 
<div class="container">
    <h1>Modifier mon mot de passe</h1>
</div>
{% endblock %}

bref rien de bien fou quoi

des avis ? merci a vous. (si vous voulez voir d'autre page bien-sur, demandez moi!)

[darkstar123456]

Bonjour

D'où vient votre code qui défini $theme-colors ?

Il me semble pas mal incomplet si on le compare avec sa valeur par défaut :

Code sass :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;

Il est plus prudent de garder le même format de tableau car sinon, vous risquez forcément de perdre toutes les autres couleurs.

Par contre, c'est étrange de charger variables.scss APRES avoir défini la couleur. Il serait plus logique que votre $primary ne soit pas de la bonne couleur... c'est étrange :thinking:

[bndd24]

Merci pour la réponse c'est exactement ça, mais c'est étrange car j'ai l'habitude de procéder de cette façon et je n'ai jamais eu le moindre problème a redéfinir seulement une couleur, d'ailleurs je ne vois pas pourquoi ont serait obligé d'écrire l'ensemble du tableau plutôt que seulement la couleur que l'on souhaite redéfinir. très bizarre

Pour la dernière remarque, j'avais lu quelque part qu'avec le scss ont pouvait redéfinir des variables même AVANT l'import (sur grafikart je crois), ca doit être pour cela je pense.