As I develop my "Hello World" app using create-react-app, I encountered an issue where importing a css/sass file into my react components resulted in the <style> tag being visible and the styled text appearing on my page background. 😕😕😕😕
I attempted to resolve this by installing several npm modules, but unfortunately it did not help. Here are the modules I tried:
- sass
- sass-loader
- node-sass
- css-loader
- style-loader
Here is a snippet of my code for reference:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<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="logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
App.js
import React from 'react';
import SimpleForm from "./SimpleForm"
const App = () => {
return (
<div>
{/* nothing changes if I comment this ↓ guy */}
<SimpleForm />
</div>
);
}
export default App;
and a piece of SimpleForm.js
import React from 'react';
import './SimpleForm.scss';
import Greetings from "./Greetings"
class SimpleForm extends React.Component {
...
render() {
const { firstNameError, firstName } = this.state;
return (
<div className="main">
<input
type="text"
name="firstName"
onChange={this.onFirstNameChange}
onBlur={this.onFirstNameBlur}
/>
{firstNameError && <div className="error">{firstNameError}</div>}
<Greetings
firstName={firstName}
/>
</div>
);
}
export default SimpleForm
There is nothing particularly special in SimpleForm.scss/css, so I do not believe it is causing this issue.
(I also tried import './SimpleForm.css';)
The current result looks like this:
But I would expect something more along the lines of this:
UPD_1:
SimpleForm.css (compiled from SimpleForm.scss)
* {
font-family: Verdana, Geneva, Tahoma, sans-serif;
align-self: center;
margin-top: 20px;
display: block;
}
.main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #1b224b;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
input {
width: 30%;
font-size: 40px;
color: #77c848;
border: none;
border-bottom: 2px solid #77c848;
background: none;
outline: none;
}
/*# sourceMappingURL=SimpleForm.css.map */
UPD_2
Greetings.js
import React from "react"
const Greetings = ({ firstName, lastName }) => (
<div>
Hey you! {firstName} {lastName}!
</div>
);
export default Greetings;