Search code examples
bootstrap-4sassscss-lint

where shall I put custom.scss file to customize bootstrap component?

I want to customize my bootstrap with scss so I know that I have to make custom.scss and put some scss code into this - but there ins't working because I don't know where can I pust these file. the below picture from official website of bootstrap - but it doesn't working enter image description here also I did this - and some structor that I fonded in internet

Solution

  • It doesn't meter where is your file is. The point is to include your custom variables before variables from bootstrap.

    You can create BS file, where you can include BS components and other elements and in this file you can override default variables.

    More over, in this case you can optimize your target CSS file.

    One more thing - in example I using BS5, in v4 approach the same (because it's SCSS).

    Your structure:

    .
└── scss/
    ├── _bs-variables.scss
    ├── custom-bootstrap.scss
    └── custom.scss

    Example:

    _bs-variables.scss:

    $primary:       tomato;

    custom-bootstrap.scss:

    /*!
 * Bootstrap v5.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

// scss-docs-start import-stack
// Configuration
@import "~bootstrap/scss/functions";

// override default variables
@import "./bs-variables"; // here is your custom variables include
// default BS variables
@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";
...

    custom.scss:

    @import './custom-bootstrap';

// other SCSS code
...