BUILD bootstrap

build.md

REPO => https://github.com/twbs/bootstrap

git clone https://github.com/twbs/bootstrap.git

cd bootstrap

npm install

If you use Visual Code!

code .

Create a .scss file under \scss with a name you want!

Your file must have:

@import "functions";
@import "variables";
@import "mixins";

Now you can add other components, like:

@import "grid";
@import "tables";
@import "card";

Now build the thing using => npm run dist

Your file will be under \dist folder.

Or you can do it directly using sass, without npm run dist.

Simple install sass => npm install -g sass

Run the tool => sass scss\custom.scss dist\custom.css

References:

https://sass-lang.com/install

https://getbootstrap.com/docs/4.0/getting-started/theming/

https://getbootstrap.com/docs/4.0/getting-started/build-tools/

example.namespace.scss

/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Configuration

.namespace-custom {
    @import "functions";
    @import "variables";
    @import "mixins";
    @import "utilities";


    // Layout & components
    @import "grid";
    @import "tables";
    @import "card";
    @import "badge";
    @import "alert";


    // Helpers

    @import "helpers";


    // Utilities

    @import "utilities/api";
}

example.scss

/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Configuration

@import "functions";
@import "variables";
@import "mixins";
@import "utilities";


// Layout & components
@import "grid";
@import "tables";
@import "card";

// Helpers

@import "helpers";


// Utilities

@import "utilities/api";