Believemy logo purple
Connexion
Discussions

Personnalisation ecrase le contenu de base ?

Image

Bonjour

 

Je me remets à la pratique de Sass avec Bootstrap et y a-t-il eu un changement pour la définition des couleurs ?

 Lorsque je créer mon css depuis le code saas ci-dessous j’ai l’impression que toutes les couleurs sont perdu sauf ma personnalisation ? 

 

$theme-colors: (
        "primary" : #8e44ad
);

@import "../../node_modules/bootstrap/scss/bootstrap";

 

en effet je perd le bg-light de mon html

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="design/css/defaut.css">
    <title>Bootstrap Saas</title>
</head>
<body class="bg-primary">
  <header class="bg-light p4 text-primary text-center font-weight-bold h1">
    SAAS et BOOTSTRAP
  </header>
</body>
</html>

 

Olivier Rabillon
Développeur C# chez un editeur de logiciel.
11 réponses
Image
Louis-Nicolas Leuillet
Le 06/02/2023 à 08:51

Bonjour Olivier

 

Je te recommande d'importer tes variables avant de les changer, puis d'appeler encore une fois le fichier.

 

@import "../../node_modules/bootstrap/scss/bootstrap";

$theme-colors: (
        "primary" : #8e44ad
);

@import "../../node_modules/bootstrap/scss/bootstrap";
Image
Olivier Rabillon
Le 06/02/2023 à 09:06

Merci pour la reponse rapide.

Malheureusement cela ne fonctionne pas. La couleur primary reste le bleu de base et ne prend pas en compte ma modification.

Image
Olivier Rabillon
Le 06/02/2023 à 09:34

J'ai trouver une solution intermediaire qui a l'air de fonctionner. Je definie juste les varibles avant

$primary:  #8e44ad;
$danger: #48dbfb;

@import "../../node_modules/bootstrap/scss/bootstrap";
Image
Olivier Rabillon
Le 06/02/2023 à 10:50

Du coup j'ai le même souci si je veux ajouter des couleurs perso je perd les couleurs de bases.

 

Image
Olivier Rabillon
Le 06/02/2023 à 11:41

Bon Serait-il possible d'avoir un exemple fonctionnel de modification des couleur du theme $theme-colors avec ajout de colour personaliser car cela ne fonctionne absoluement pas, je cherche depuis 5h ce matin et je ne trouve rien a chaque fois cela fait exploser bootstrap plus rien ne marche.

 

merci d'avence

 

Image
Olivier Rabillon
Le 06/02/2023 à 11:48

L'exemple de la vidéo ne marche plus sur la version 5.2.3 de bootstrap

Image
Olivier Rabillon
Le 06/02/2023 à 22:16

Bonsoir dernier message pour aujourd'hui.

 

Apres un repos et une bonne lecture de la documentation j'ai fini par trouver et comprendre comment faire. 

 

// import préalable obligatoire
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";

// Definition couleur existante
$primary:  #8e44ad;
$danger: #48dbfb;

// Creation nouvelle couleur
$custom-colors: (
        "toto": #2ecc71
);

// Merge maps
$theme-colors: map-merge($theme-colors, $custom-colors);

@import "../../node_modules/bootstrap/scss/bootstrap";

 

Et la tout fonctionne. 

 

Bonne soirée

Image
Louis-Nicolas Leuillet
Le 07/02/2023 à 15:04

Merci Olivier, il semble qu'il y ait une mise à jour qui ait changé le fonctionnement des personnalisations quand bien même aucune grosse modification n'avait été déclarée. Merci pour ta réponse :)

Image
Pablo Gonzalez
Le 31/12/2023 à 00:12 (modifié le 31/12/2023 à 00:15)

Voici ma version qui fonctionne avec la version 5.3 :

// Import obligatoire
@import "/node_modules/bootstrap/scss/_functions.css";

// Modification couleurs existantes
$primary: #74d900;
$danger: #ff4136;

// Option : import de tout Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap.scss";

Voici ma source : https://getbootstrap.com/docs/5.3/customize/sass/

Image
Pablo Gonzalez
Le 31/12/2023 à 09:03 (modifié le 31/12/2023 à 09:04)

Voici la version complète avec l'ajout d'une couleur personnalisée :

// Obligatoire (Option A : inclure uniquement ce que l'on a besoin)
@import "/node_modules/bootstrap/scss/_functions.css";

// Modification couleurs existantes
$primary: #74d900;
$danger: #ff4136;

// Variables définies dans le fichier Bootstrap. $theme-colors
$theme-colors: (
  "primary": $primary,
  "danger": $danger
);

// Créer ses propres couleurs
$custom-colors: (
  "couleurPerso": rgb(255, 0, 0)
);

// Fusionner
$theme-colors: map-merge($theme-colors, $custom-colors);

// Option B : inclure tout Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap.scss";
Meilleure réponse
Image
Louis-Nicolas Leuillet
Le 31/12/2023 à 11:53

Merci Pablo

Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.
Discussion résolue

Informations

Créée le 6 février 2023 06:19
Dernière activité le 31 décembre 2023 11:53
Cours : Le Programme Rocket