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...

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

我将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负责处理它们。

任何想法如何解决该问题？

Answer 1

据我所知，如果要使用bootswatch主题的scss版本来覆盖某些变量或您想使用的任何方法，则必须选择第一个他们。 scss文件将被预处理并转换为一个单独的css文件。因此，当您在scss文件中导入js文件时，scss文件将被转换为普通的css文件，并将被导入您的js文件在整个过程结束时。因此，变量scss文件将是单个css文件，无法从其他文件中看到该文件。这就是为什么您必须将变量导入scss文件中以便在构建时使用的原因。（此外，_在文件名中还显示了这些文件是部分文件。）

我也经常使用bootswatch主题，并且我总是按照您在第一个选项中所描述的那样使用它们，将它们全部导入我自己的index.scss文件或任何其他文件中，然后可以将该文件导入任何{ {1}}文件：

js

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

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

1 个答案: