How to load all necessary files from bower folder?

Question

JavaScript

Good day. I use bower + gulp. When I load plugins, libraries through bower, which have only one main file in which everything that is needed for development (for example, jquery.js, normalize.css) then everything is fine, I pull these files from the folder (bower_components) into my folder for libraries and then I do with them what I want. But for example, I downloaded bootstrap 4 and there these files are registered in bower.json:

"main": [
    "scss/bootstrap.scss",
    "dist/js/bootstrap.js"
  ],

They are pulled into my libraries folder, but already in the bootstrap.scss file there are a bunch of imports like this

@import "variables";
@import "mixins";
@import "custom";

Naturally, these files are not imported, since they are in the bower'a folder, and not in the one where I pull out the main file. So the question is: how can I pull out all the necessary files for bootstrap, so that I can compile it normally, without manually writing all the paths in bootstrap.scss? Or it also happens in some plugins that you need to pull up the folder with fonts (for example, in fontawesome), how to do this?
Here is the project structure: prnt.sc/edbrta

Answer 1

You can try this way
In bower.json reload main for bootstrap

"overrides": {
    "bootstrap": {
      "main": [
        "./assets/stylesheets/**/*.scss"
      ]
    }

Then extract all the files by changing the base (then the folder structure will be preserved). Perhaps a more elegant relative part of the path could be changed, but for now...

gulp.task('bootstrap', function () {
    return gulp.src(mainBowerFiles('**/*.{sass,scss}'), {base: __dirname + '/bower_components/bootstrap/'})
        .pipe(gulp.dest('./app/css/libs'))
});

But it seems to me that the best solution would be to change the path for downloading bower dependencies directly to the app folder and quietly build the project without redefining the main files, copying a bunch of files for each new dependency

Answer 2

If I understand the question correctly and you want to upload files separately, then the gulp-sass plugin (and node-sass, yes, too) has the includePaths option.
In this option, you can list an array of paths to folders, and in main.scss accordingly, you can include files starting from these paths