Bootstrap testreszabás

Szerző: Sallai András
Copyright © Sallai András, 2021
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

Könyvtárszerkezet

app01/
  |-app/
  |  |-css/
  |  |  `-app.css
  |  |-scss/
  |  |  `-app.scss
  |  `-index.html
  |-node_modules/
  |  `-...
  |-bs-config.json
  |-package.json
  `-yarn.lock

Weblap

index.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>App01</title>
    <link rel="stylesheet" href="css/app.css">
</head>
<body>
    <div class="container-fluid bg-primary">
        <h1>Első alkalmazás</h1>
    </div>
</body>
</html>

Saját Scss

Feltételezzük, hogy a Bootstrap telepítve lett az npm vagy a yarn paranccsal a node_modules könyvtárba.

A példa kedvéért változtassuk meg a primary színét:

app.scss

$primary: red;
 
@import '../../node_modules/bootstrap/scss/bootstrap';

Fordítás

sass --watch app/sass:app/css

Függelék

$theme-colors: (
    "primary": navy,
    "secondary": gold
);
 
@import "../node_modules/bootstrap/scss/bootstrap";