Twitter bootstrap 如何在create react应用程序中正确导入引导4 SAS

上一次我导入了

风格的引导。较少类似于这样（不使用js框架）：

现在，我使用
createreact app
，为每个组件使用单独的文件夹和单独的sass文件（我被告知这是最好的方法之一）

创建react应用程序文档，建议在package.json中的脚本中包含以下行：

  "scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path
     ...
  },

我在_custom.scs中导入引导，如下所示：

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

我在该文件中还有自定义变量

问题是我需要在每个组件中分别导入
custom.scss
文件，以使用引导或自定义变量，然后一个构建的css文件变得巨大。
我需要一个解决方案，其中我需要在
App/style.scss
中导入一次
custom.scss
文件。可能吗？有经验的开发人员如何导入引导


如果有必要，我也使用reactstrap，不导入bootstrap.css

编辑：我在一个开发人员环境中，我认为在生产环境中应该可以，因为所有内容都绑定到单个css中，但我没有检查它

编辑：我无法检查它，因为我无法使用未定义的变量进行构建。
如果您使用create react app，并在某个css文件（在您的示例中是custom.scss）中定义全局变量，请将其导入index.js。之后，您的任何组件都可以使用变量、mixin等，而无需在组件的SCS中显式导入custom.scs

  "scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path
     ...
  },

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