Я создал веб-сайт, используя create-реагировать-приложение, однако, когда я пытаюсь запустить его, используя сборку пряжи, все, что я получаю, это пустая белая страница и эта ошибка в консоли:
"Не удалось загрузить ресурс : net :: ERR_FILE_NOT_FOUND custom. css: 1 "
Я пытался добавить% PUBLIC_URL% к ./custom.css, но это не сработало, я также пытался импортировать CSS прямо в мое приложение. js:
import React from "react";
import home from "./pages/home"
import about from "./pages/about"
import stats from "./pages/stats"
import contact from "./pages/contact"
import faq from "./pages/faq"
import login from "./pages/Login"
import signup from "./pages/SignUp"
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
import './custom.css'
class App extends React.Component {
render() {
return (
<Router>
<div>
<Route exact path='/home' component={home} />
<Route exact path='/about' component={about} />
<Route exact path='/stats' component={stats} />
<Route exact path='/faq' component={faq} />
<Route exact path='/contact' component={contact} />
<Route exact path='/signup' component={signup} />
<Route exact path='/login' component={login} />
</div>
</Router>
)
}
}
export default App;
index. html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Assistant:400,600,700,800&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>StatHero</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="%PUBLIC_URL%/custom.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
package. json file:
{
"name": "prototypesite",
"homepage": "./",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"babel-eslint": "10.0.1",
"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"popper.js": "^1.16.0",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.0.1",
"style": "^0.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
