Setup Bootstrap SCSS for your project.

init-bootstrap-scss.sh

#!/bin/bash

# 1. Message de début
echo "🚀 Initialisation de l'architecture SCSS (Pattern 3-1)..."

# 2. Création des dossiers
mkdir -p assets/styles/{abstracts,components,vendors}

# 3. Création de abstracts/_variables.scss
cat << 'EOF' > assets/styles/abstracts/_variables.scss
// --- 1. TOGGLES ---
$enable-shadows: true;
$enable-gradients: false;
$enable-rfs: true;
$enable-dark-mode: true;
$color-mode-type: data;

// --- 2. COULEURS ---
$primary: #6610f2;
$secondary: #ffc107;
$body-bg: #f8f9fa;
$body-bg-dark: #121212; 
$body-color-dark: #dee2e6;

// --- 3. COMPOSANTS ---
$card-border-width: 0;
$card-box-shadow: 0 10px 20px rgba(0,0,0,0.08);
$card-border-radius: 1rem;
$card-spacer-y: 1.5rem;
$card-spacer-x: 1.5rem;
$btn-border-radius: 50px;

// --- 4. CONFIGURATION MAPS (SPACERS) ---
$spacer: 1rem;
$custom-spacers: (
  6: $spacer * 4,
  7: $spacer * 5,
  8: $spacer * 6,
  9: $spacer * 8,
  10: $spacer * 10
);
EOF

# 4. Création de abstracts/_mixins.scss
cat << 'EOF' > assets/styles/abstracts/_mixins.scss
@mixin hover-lift-effect {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform, box-shadow;
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.15) !important;
  }
}
EOF

# 5. Création de vendors/_bootstrap.scss
cat << 'EOF' > assets/styles/vendors/_bootstrap.scss
// 1. Outils
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";

// 2. Fusion des Maps
$spacers: map-merge($spacers, $custom-spacers);

// 3. Utilitaires
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/utilities/api";

// 4. Bootstrap Core
@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";
@import "~bootstrap/scss/placeholders";
@import "~bootstrap/scss/helpers";
EOF

# 6. Création de components/_cards.scss
cat << 'EOF' > assets/styles/components/_cards.scss
.card-product {
  @include hover-lift-effect;
  border: 1px solid var(--bs-border-color);
  overflow: hidden;
  .card-img-top {
    height: 200px;
    object-fit: cover;
  }
}
EOF

# 7. Création de app.scss
cat << 'EOF' > assets/styles/app.scss
@import "abstracts/variables";
@import "abstracts/mixins";
@import "vendors/bootstrap";
@import "components/cards";

.hover-lift {
  @include hover-lift-effect;
}

[data-bs-theme="dark"] {
  --bs-card-bg: #1e1e2e;
  --bs-card-border-color: #2d2d42;
  --bs-body-bg: #121212;
}
EOF

echo "✅ Fichiers SCSS générés dans assets/styles/ !"
echo "💡 N'oubliez pas de lancer 'npm run watch'"