Skip to content

Documentation for customizing Bootstrap SCSS leaves out critical information #38534

Closed
@craigmcc

Description

@craigmcc

For 5.3, the page I am referring to is:

https://getbootstrap.com/docs/5.3/customize/sass/

but the issue has been there a long time.

People new to understanding how SCSS -> CSS works, especially in relationship to Bootstrap, need to understand two critically important details that are not currently covered:

  • After you have created your scss/custom.scss or whatever file, you need to recompile it to create a revised scss/custom.css (or whatever) file.
  • Subsequent to that recompile, you need to import the custom custom.css file, instead of the standard Bootstrap one.

Separately, it would be useful to point out that tools like sass are available that can watch for changes in your source files, and automatically recompile the CSS when the SCSS file is changed. Many IDEs also have "file watching" plugins that can do the same thing.

It took me viewing more than a few YouTube videos to figure out why just editing my custom.scss file didn't have any effect.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions