CODEWITHSUNDEEP
twitter-bootstrapsassbootstrap-4gulpgulp-sass
Maciej K
Maciej K

Reputation: 170

Bootstrap 4.3.1 change breakpoints using Gulp and .sass files (not .scss)

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?

Upvotes: 0

Views: 275

Answers (1)

Zidane M.
Zidane M.

Reputation: 13

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?

Upvotes: 1

Related Questions