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文件中正确引用了吗？

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

1 个答案: