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

【问题标题】：How to import bootswatch themes into react-bootstrap?如何将 bootswatch 主题导入 react-bootstrap？
【发布时间】：2019-06-23 01:45:27
【问题描述】：

我使用 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...

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

我将 CRA 的 index.css 重命名为 index.scss 并将以下行添加到文件顶部（我安装了 node-sass）：

@import "./themes/superhero/variables"; @import "~bootstrap/scss/bootstrap"; @import "./themes/superhero/bootswatch";
我将以下行添加到 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 处理。

有什么办法解决这个问题吗？

【问题讨论】：

标签： javascript reactjs sass react-bootstrap bootswatch

【解决方案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

【讨论】：