I have some problem with importing a css files inside a js ones :
js file (src/App.js):
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import MainApp from './MainApp.js';
export default class App extends Component {
constructor(props) {
super(props);
this.props.className="App";
};
render() {
return (
<div class="App">
<MainApp/>
</div>
)
}
};
css file (src/App.css):
:root {
--primaryColor: #ffcf04;
--secondaryColor: #ffed95;
--colorAccent: #bb7c02;
}
.App {
position : fixed;
width : 100%;
height : 100%;
top : 0;
left : 0;
background: var(--secondaryColor);
padding : 0;
margin : 0;
}
My result on chromium:
:root {
--primaryColor: #ffcf04;
--secondaryColor: #ffd881;
--colorAccent: #bb7c02
}
.App {
background: #ffcf04;
background: var(--primaryColor);
margin: 0;
padding: 0;
position: fixed
}
while searching in the "Network" panel of the inspector, with a 200 return status.
It means that my nginx server provides the bad css file, so that react js is not using my actual css but an old version of it when I run "npm run build".
I am actually using nginx (with it working configuration) and react-js to build my project.
How do I disable the react-js cache? Thanks for your help!
2
Answers
Try to setup your build tools to give a unique
hash
string to the CSS file on every build. So the html file should have something like this:May be you need replace class="App" to className="App".