Css 为什么我在使用create react应用程序的生产构建中丢失引导样式？
当运行npm run build并将我的react项目部署到netlify时，我网站的netlify版本会丢失一些引导样式。。。以下是我的本地托管版本的图像： 以下是netlify版本的链接： 我已经确保在index.html中添加了相关的样式表链接，并按照react bootstrap、bootstrap和CRA文档中的说明将相关的导入添加到index.js中，但我并不确定到底出了什么问题。我发现，如果我删除该行： 导入“bootstrap/dist/css/bootstrap.css” 从我的index.js和本地运行中，我在本地版本中遇到的问题与我在netlify版本中遇到的问题完全相同，因此这肯定与引导样式表不适合部署有关 如果您想查看我的github回购： package.json显示引导和react引导版本：Css 为什么我在使用create react应用程序的生产构建中丢失引导样式？,css,node.js,reactjs,create-react-app,react-bootstrap,Css,Node.js,Reactjs,Create React App,React Bootstrap,当运行npm run build并将我的react项目部署到netlify时，我网站的netlify版本会丢失一些引导样式。。。以下是我的本地托管版本的图像： 以下是netlify版本的链接： 我已经确保在index.html中添加了相关的样式表链接，并按照react bootstrap、bootstrap和CRA文档中的说明将相关的导入添加到index.js中，但我并不确定到底出了什么问题。我发现，如果我删除该行： 导入“bootstrap/dist/css/bootstrap.css”
{
"name": "front-end-nc-news",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.17",
"@fortawesome/free-solid-svg-icons": "^5.8.1",
"@fortawesome/react-fontawesome": "^0.1.4",
"@reach/router": "^1.2.1",
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"css-loader": "^2.1.1",
"mdbreact": "^4.13.0",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.8",
"react-dom": "^16.8.6",
"react-scripts": "2.1.8",
"style-loader": "^0.23.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {}
}
{
“名称”：“前端nc新闻”，
“版本”：“0.1.0”，
“私人”：没错，
“依赖项”：{
“@fortawesome/fontawesome svg core”：“^1.2.17”，
“@fortawesome/free实心svg图标”：“^5.8.1”，
“@fortawesome/react-fontawesome”：“^0.1.4”，
“@reach/router”：“^1.2.1”，
“axios”：“^0.18.0”，
“引导”：“^4.3.1”，
“css加载器”：“^2.1.1”，
“mdbreact”：“^4.13.0”，
“反应”：“^16.8.6”，
“react引导”：“^1.0.0-beta.8”，
“react dom”：“^16.8.6”，
“反应脚本”：“2.1.8”，
样式加载器“^0.23.1”
},
“脚本”：{
“开始”：“反应脚本开始”，
“构建”：“反应脚本构建”，
“测试”：“反应脚本测试”，
“弹出”：“反应脚本弹出”
},
“eslintConfig”：{
“扩展”：“反应应用程序”
},
“浏览者”：[
">0.2%",
“没有死”，
“不是ie问题在于cra构建css的顺序与它在开发环境中编译css的方式相比。通过修改app.css文件并删除一些不必要的css修复了问题。问题在于cra构建css的顺序与它在开发环境中编译css的方式相比。通过修改app.css修复了问题s文件并删除一些不必要的css。我可以确切地问一下您是如何修改app.css文件的吗？我现在面临着同样的问题。有些草率的css在本地运行时没有任何效果，但在CRA构建后生效（由于重新排序）。因此，解决方案是确保所有css都是正确的，删除任何您不需要的内容。我可以确切地问一下您是如何修改app.css文件的吗？我现在面临着同样的问题。有一些松散的css在本地运行时没有任何效果，但在CRA构建后生效（由于重新排序）因此，解决方法是确保你所有的css都是正确的，删除任何你不需要的东西。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>NC NEWS</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
</head>