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中导入bootstrap：

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

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

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

我也使用reactstrap，如果重要的话，不要导入bootstrap.css。

编辑：我在开发者环境中，我认为在生产中它应该没问题，因为所有内容都捆绑在单个css中，但我没有检查过它。

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

Answer 1

如果您使用create-react-app，并在某些CSS文件（在您的情况下为custom.scss）中定义了全局变量，则将其导入index.js中。之后，您的任何组件都可以使用您的变量，mixin等，而无需在组件的scss中显式导入custom.scss。

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

1 个答案: