Bootstrap 4.3.1 使用 Gulp 和 .sass 文件（不是 .scss）更改断点

Question

我正在创建新的登录页面，我想更改默认的 Bootstrap 4.3.1 断点。

我已经使用这个命令安装了 bootstrap 4.3.1：

npm install bootstrap

之后我创建了自己的 .SASS 文件，我尝试从 node_modules 目录导入 Bootstrap 并更改断点：

// 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"

当我尝试使用 Gulp 将此文件编译为 .css 时出现错误：

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

是否有可能使用 .sass 而不是 .scss 重新编译 Bootstrap 4.3.1？

更新：

现在我知道使用 .sass 代替 .scss 不是问题。

这对我有用：

@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"

但是如何引用node_modules/bootstrap目录呢？

Answer 1

是否有可能使用 .sass 重新编译 Bootstrap 4.3.1 而不是 .scss？

我认为这不是你的问题。当 gulp.sass() 正在检查您的代码时，它会停止，因为它无法解析您的文件。您的主 scss 文件中是否正确引用了您的路径？