时间戳

首页 > 解决方案 > 如何将 bootswatch 主题导入 react-bootstrap？

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

问题描述

我使用 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.cssCRA 重命名为index.scss并将以下行添加到文件顶部（我安装了 node-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 处理。

任何想法如何解决这个问题？

标签： javascriptreactjssassreact-bootstrapbootswatch

解决方案

据我所知，如果您想使用主题的 scss 版本来覆盖某些变量或您想对它们做的任何事情，您必须选择第一个。bootswatch这些scss文件将被预处理并转换为一个css文件。因此，当您在文件中导入scss文件时，js该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

推荐阅读