在 create react app 中扩展 bootstrap

Question

我很想在我的 sass 文件中扩展 boostrap 类。我正在按照 example.

中的方式编译我的 sass

我已将 boostrap 文件复制到我的 /src 文件夹中。

但是，使用这个基本示例：

@import "bootstrap/*";

.header{
    @extend .container;
    background-color:red;

}

我收到错误：

{ "status": 1, "file": "C:/sites/mharrisweb-redux/src/sass/style.scss", "line": 1, "column": 1, "message": "File to import not found or unreadable: bootstrap/.\nParent style sheet: C:/sites/mharrisweb-redux/src/sass/style.scss", "formatted": "Error: File to import not found or unreadable: bootstrap/.\n Parent style sheet: C:/sites/mharrisweb-redux/src/sass/style.scss\n on line 1 of src/sass/style.scss\n>> @import \"bootstrap/*\";\n ^\n" }

Answer 1

如果你有这样的文件结构：

src                
  bootstrap
  sass
    style.scss

你应该使用：

@import "../bootstrap/scss/bootstrap";

如果您使用包管理器（npm 或 yarn）安装 Bootstrap，您可以使用：

@import "~bootstrap/scss/bootstrap";

在 create react app 中扩展 bootstrap

Extending bootstrap in create react app

css

sass

bootstrap-sass