Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ricardosoares's avatar

Bootstrap 4 Sass base structure file

I know this can be maybe an opinion based question but I'm new working with Sass and I want to try to get the best workflow as possible from the beginning, my current project is pulling bootstrap 4, and I want to know if this is well structured.

 |-- node_modules
      |--bootstrap

    |-- Scss
      |-- modules
      |-- partials
      |-- vendor
        |--_customVariables.scss
        |--bootstrap.scss 
      |-- main.scss

main.scss

// 3rd-party Sass
@import 'vendor/bootstrap';

// Modules goes here
...

// Partials goes here
...

boostrap.scss

/// 
// Bootstrap import files
// 

// Required
@import "../../../node_modules/bootstrap/scss/functions";
@import "customVariables"; //This is a copie from the bootstrap _variables.scss
@import "../../../node_modules/bootstrap/scss/mixins";

// Optional files goes here
...
0 likes
9 replies
bobbybouwmann's avatar
bobbybouwmann
8 years ago
Best Answer
Level 88

This is a perfect setup ;)

It depends on your project, but in general I always include the full bootstrap framework. However for keeping css files small you of course don't need everything if for example you only use the grid ;)

You can even leave out the ../../../ and replace it with this

@import '~bootstrap/scss/functions';
2 likes
ricardosoares's avatar

Thanks for your feedback but that tip of using ~ actually didn't worked for me at least, sass give an error for some reason xd

rin4ik's avatar

@ricardosoares if your packages inside node_modules it should work

@import "~bootstrap/scss/functions";
@import "customVariables"; 
@import "~bootstrap/scss/mixins";
ricardosoares's avatar

Yes i know that and it is, but for some reason it does not compile and the error says "File to import not found or unreadable"

rin4ik's avatar

you have to import like below all functions and mixins will be imported.

@import '~bootstrap/scss/bootstrap';
ricardosoares's avatar

I actually commented everything out and did this:

//Doing this it complies no problem

@import "../../../../node_modules/bootstrap/scss/functions";

//But doing this it throws and error like this:

//Error: File to import not found or unreadable: ~bootstrap/scss/functions.
//           (here goes the line)

@import "~bootstrap/scss/functions";
rin4ik's avatar

please like I said earlier try with option below without anything

@import '~bootstrap/scss/bootstrap';
ricardosoares's avatar

It's the same, the only difference is that doing 'bootstrap/scss/bootstrap' im importing all bootstrap and not just parts of it, but even doing 'bootstrap/scss/bootstrap' like you said it doesn't work for some reason at least for me the ~ isn't working at all

rin4ik's avatar

ok use it like you use before. no problems here:)

@import "../../../node_modules/bootstrap/scss/functions";
@import "customVariables"; //This is a copie from the bootstrap _variables.scss
@import "../../../node_modules/bootstrap/scss/mixins";

Please or to participate in this conversation.