Which are the correct way to import SCSS for edit Booststrap SASS?

Hi everyone,

some time ago I try to override the booststrap variables via editing SASS.
My process was:

  1. Create a new project (just a standard bootstrap page)
  2. Export the project with de function of Export SASS
  3. Create a New blank project
  4. Import manually all the SCSS files and folders that were exported from the old project (dragging one by one to my new project in the SCSS part)
  5. Create a new custom.scss file
  6. in this file, in @import “scss/bootstrap”

and finally I start editing the Sass variables.

I noted that when I did that process the Gutters in the column are eliminates, I dont know why.
this a image without compiler SASS:

and here is when I @import

are the link: https://gutters-test.bss.design

thanks folks

It looks like the files you are importing are bootstrap 4.3.1 this is overwriting the bootstrap 5 (s)css

No I didnt, I used the bootstrap 5.2 files.

:hushed: I downloaded the files from the official bootstrap web site. So I don’t know why that happened.

You may have been on the wrong version’s page which can happen. Just be sure you’re downloading the most recent version and you should be ok.

Other than that you don’t need to import any Bootstrap files (unless you’re using some 3rd party component) as they are already included with BSS.

But … there is an easier way to do what you’re wanting to do. There’s no need to export the sass files and import them. Just open your site that has them in it already and then open a new project so that you have both projects open (you may need to save the new project first, not sure).

From there just go to your old project, highlight all the files/folders in your Styles tab that you want to copy and choose copy to and it should give you the option to copy them to your new project’s name. That’s it, it works pretty slick. :slight_smile:

1 Like

Hello, thank you very much for your answer, I’m just using BBS and learning bootstrap and SASS, so I don’t understand why I shouldn’t import any file if my objective is to override some bootstrap classes that are defined. From what I’ve seen and maybe I’m wrong, is that I have to keep those files to be able to import them as the official bootsrtap page explains: (using @import)

Importing
“In your custom.scss, you’ll import Bootstrap’s source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components You also will need to include some JavaScript for our plugins.”

So, I understand that Not having those files inside my project when using for example @import “bootstrap/scss/bootstrap” or another route, I could not call those files to be able to override.

What is the end result you are actually trying to achieve? If you are just changing some of the default classes you would just override the default by copying the classes to you custom style sheet or scss file.

If you have a lot of customization done to the default scss then you may need to override the fuul files that were altered. It’s hard for me to answer without knowing what was changed from the default files.