Как изменить автоматически сгенерированные импортные сценарии реакции?

Question

У меня есть приложение реакции, которое было создано с помощью create-реагировать-приложение. Я включил в свой проект response-bootstrap, и когда я запускаю / собираю приложение, импортируется файл начальной загрузки css. Как я могу изменить этот CSS с моим собственным? Я знаю, что могу просто добавить новый CSS в index.js, но не будут ли оба файла CSS импортированы в этом случае?

Поскольку я создаю пользовательскую тему начальной загрузки, я бы предпочел, чтобы файл css начальной загрузки по умолчанию не импортировался, поскольку я создаю новый файл css из своего пользовательского файла scss и файлов начальной загрузки scss.

Мой пакет.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">

Как мне изменить эти импорты на мои скомпилированные? Я бы предпочел не использовать удаленные репозитории.

Answer 1

Вряд ли npm start будет генерировать <link> теги, потому что react-scripts не содержит механизма для их внедрения и автоматического преобразования пакетов в URL-адреса CDN.

create-react-app настраивает Webpack для поддержки загрузчиков CSS, шаблон уже содержит:

import './App.css';

Любой CSS может быть импортирован так:

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