如何更改 react-script 自动生成的导入？答案

【问题标题】：How do I change react-script auto generated imports?如何更改 react-script 自动生成的导入？
【发布时间】：2018-09-01 21:48:21
【问题描述】：

我有一个 react 应用程序，它是使用 create-react-app 创建的。我在我的项目中包含了 react-bootstrap，当我启动/构建应用程序时，导入了引导 css 文件。如何用我的自定义 CSS 更改此 CSS？我知道我可以在 index.js 中添加新的 css，但在这种情况下不会导入两个 css 文件吗？

由于我正在创建自定义引导程序主题，我希望不导入默认引导 css 文件，因为我正在从自定义 scss 文件和引导程序 scss 文件构建新的 css 文件。

我的 package.json：

{
  "name": "reading-manager-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.3.7",
    "chart.js": "^2.7.2",
    "react": "^16.4.2",
    "react-bootstrap": "^0.32.1",
    "react-chartjs-2": "^2.7.4",
    "react-dom": "^16.4.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

npm start 生成：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

如何将这些导入更改为我自己编译的导入？我宁愿不使用远程存储库。

【问题讨论】：

标签： reactjs react-bootstrap react-create-app

【解决方案1】：

npm start 不太可能生成<link> 标签，因为react-scripts 不包含自动注入它们并将包解析为 CDN URL 的机制。

create-react-app 配置 Webpack 支持 CSS 加载器，样板文件已经包含：

import './App.css';

任何 CSS 都可以这样导入：

import 'bootstrap/dist/css/bootstrap.css';

【讨论】：

不太可能是什么意思？在我的应用程序中，我没有为引导程序添加 CDN 导入，但是在我使用 npm start 启动应用程序后，它们被添加了。
我认为 react-bootstrap 正在添加这些导入。
react-bootstrap 不会自动添加 Bootstrap 样式。据我所知，react-scripts、bootstrap 和 react-bootstrap 都无法将 bootstrap 替换为 https://stackpath.bootstrapcdn.com/bootstrap...，并且它们可以自动获取 CDN URL。我希望这些 CDN 样式以某种方式添加到项目 index.html 或 .css 中。请提供可以复制问题的stackoverflow.com/help/mcve - 一个 repo 左右。我建议先在您的项目文件夹中搜索bootstrapcdn 字符串。
我现在觉得好傻，你说得对，导入是在 index.html 中手动添加的（没有检查公用文件夹）。
@CrazySabbath 很高兴你解决了这个问题。我开始认为我在 CRA 中遗漏了一些关于 Webpack 配置的重要内容。