Question

我有一个React应用程序，它是使用create-react-app创建的。我在项目中包含了react-bootstrap，当我启动/构建应用程序时，导入了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">

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

Answer 1

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

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

import './App.css';

任何CSS都可以这样导入：

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

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

1 个答案: