0

I'm creating new landing page and I want to change the default Bootstrap 4.3.1 breakpoint.

I have already installed bootstrap 4.3.1 using this command:

npm install bootstrap

After that I created own .SASS file where I'm trying to import Bootstrap from node_modules directory and change the breakpoint:

// Import Bootstrap source files

@import "~bootstrap/scss/functions"
@import "~bootstrap/scss/variables"

$grid-breakpoints:
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1340px

$container-max-widths:
    sm: 100%,
    md: 100%,
    lg: 100%,
    xl: 1300px

@import "~bootstrap/scss/bootstrap"

When I'm trying to compile this file to .css using Gulp I have error:

Error: File to import not found or unreadable: ~bootstrap/scss/functions.
        on line 3 of src/sass/styles.sass
>> @import "~bootstrap/scss/functions";

Is there any possibility to recompile Bootstrap 4.3.1 using .sass instead of .scss?

UPDATE:

Now I know that using .sass instead of .scss is not a problem.

This is working for me:

@import "../../vendors/bootstrap/scss/functions"
@import "../../vendors/bootstrap/scss/variables"

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1340px)

$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1330px)

@import "../../vendors/bootstrap/scss/bootstrap"

But how to refer to the node_modules/bootstrap directory?

Maciej K
  • 160
  • 4
  • 11
  • Possible duplicate of [Bootstrap 4 Change Breakpoints](https://stackoverflow.com/questions/47747208/bootstrap-4-change-breakpoints) – cloned Oct 22 '19 at 06:11

1 Answers1

1

Is there any possibility to recompile Bootstrap 4.3.1 using .sass instead of .scss?

I don't think this is your issue. As gulp.sass() is going through your code it stops because it is not able to resolve your file. Are your paths correctly referenced in your main scss file?

Zidane M.
  • 13
  • 4