如何将bootswatch主题导入react-bootstrap？

Question

我使用CRA和react-bootstrap创建了一个基本的React应用程序。 我想加载不同的bootswatch主题。 所有主题都下载并放在src/themes文件夹中。 每个主题都有自己的文件夹，其中包含一组固定的文件名：

src/themes/

  superhero/
  _bootswatch.scss
  _variables.scss
  bootstrap.css
  bootstrap.min.css

  /cerulean
  _bootswatch.scss
  _variables.scss
  bootstrap.css
  bootstrap.min.css

  and so on...

现在假设我想加载超级英雄主题。 这可以通过以下显示的不同方式完成：

1. 我改名index.css CRA的至index.scss并添加下列行到文件的顶部（I安装节点SASS）：

   @import "./themes/superhero/variables"; @import "~bootstrap/scss/bootstrap"; @import "./themes/superhero/bootswatch";

2. 我将以下行添加到index.js：

   import './themes/superhero/bootstrap.min.css'

这两种方法都可以独立工作。 我想要做的是在index.js中导入它们，如下所示：

import './themes/superhero/_variables.scss' import 'bootstrap/scss/bootstrap.scss'; import './themes/superhero/_bootswatch.scss'

当我这样做时，前两行被正确导入，但是当涉及第三个导入_bootswatch.scss时，我收到未定义的变量错误。 这是因为前两个文件是独立的。 我认为第三个文件中有因变量，但在每次导入时，它们的方式不同，因此最后一次导入无法访问变量。 方法1不是这种情况，它们全部导入到单个文件中，然后node-sass负责处理它们。

任何想法如何解决问题？

Answer 1

据我所知，如果你想使用bootswatch主题的scss版本覆盖一些变量或者你想用它们做什么， 你必须选择第一个 。 scss文件将被预处理并转换为单个css文件。 因此，当您在js文件中导入scss文件时， scss文件将转换为普通的css文件，并在整个过程结束时导入到您的js文件中。 因此，变量scss文件将是单个css文件，无法从不同的文件中看到。 这就是为什么你必须在scss文件中导入变量，以便在构建时可用。 （另外， _在文件名中显示这些文件是部分文件）。

我也经常使用bootswatch主题，并且我总是按照你在第一个选项中描述的那样使用它们，在我自己的index.scss文件中导入所有这些，或者然后在任何js文件中导入该文件：

// here goes my personal variables
@import "./themes/[theme_name]/variables";
@import "~bootstrap/scss/bootstrap";
@import "./themes/[theme_name]/bootswatch";

检查官方sass指南网站，预处理部分： https ： //sass-lang.com/guide