如何在create-react-app中正确导入bootstrap 4 sass

Question

以前我style.less像这样导入了bootstrap （不使用js框架）：

@import "bootstrap/less/bootstrap.less";
@import "variables.less";
@import "mixins.less";
@import "main.less";
...

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

??? components
?   ??? About
?   ?   ??? index.jsx
?   ?   ??? style.css
?   ?   ??? style.scss
?   ??? App
?   ?   ??? App.test.js
?   ?   ??? index.jsx
?   ?   ??? style.css
?   ?   ??? style.scss
?   ??? Bread
?   ?   ??? index.jsx
?   ?   ??? style.css
?   ?   ??? style.scss
?   ??? Delivery
?   ?   ??? index.jsx
?   ?   ??? style.css
?   ?   ??? style.scss
?   ??? Footer
?   ?   ??? index.jsx
?   ?   ??? style.css
?   ?   ??? style.scss
?   ??? Header
?   ?   ??? index.jsx
?   ?   ??? style.css
?   ?   ??? style.scss
?   ??? index.js
??? _custom.scss
??? index.js

Create-react-app文档建议将此行包含在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.scss中导入引导程序：

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

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

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

---

我也使用reactstrap，并且不要导入bootstrap.css。

编辑：我在开发人员环境中，我认为在生产环境中应该没问题，因为所有内容都捆绑在单个CSS中，但是我没有进行检查。

编辑：我无法检查它，因为我无法使用未定义的变量进行构建。

Answer 1

如果您使用 create-react-app，并在某个 css 文件（在您的例子中为 custom.scss）中定义全局变量，请将其导入您的 index.js 中。之后，您的任何组件都可以使用您的变量、mixins 等，而无需在组件的 scss 中显式导入 custom.scss。