skip to Main Content

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


  1. 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:

    <link rel="stylesheet" href="style-[hash].css">
    
    Login or Signup to reply.
  2. May be you need replace class="App" to className="App".

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search