Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Messed up CSS after deploying with gh-pages #296

Open
kkdima opened this issue May 23, 2019 · 1 comment
Open

Messed up CSS after deploying with gh-pages #296

kkdima opened this issue May 23, 2019 · 1 comment

Comments

@kkdima
Copy link

kkdima commented May 23, 2019

I've come up against this problem which I guess has something to do with the order of applying CSS styles.
After deployment to GitHub pages, the project looks messed up. Styles either are missing or get overwritten with default ones.

Here's an example of the issue:
Screen Shot 2019-05-22 at 6 46 02 PM
Screen Shot 2019-05-22 at 3 21 38 AM

And here's how the Developer Tools tab looks like for developing and production build:
Screen Shot 2019-05-22 at 6 27 18 PM

Maybe someone has been dealing with a similar issue?
Would be grateful for any help, as I'm already spent an obscene amount of time struggling with this.

Also, one more problem has occurred with deployment. I'm using React Router for this project and images that display perfectly in development build crashes after deployment. Information I have gathered so far points to import problems, and cause for this I think might be React Router hiding the correct path somehow.

The problem looks like this:
(Once I'm clicking and navigating through the navbar the URL losing part of the address and after refreshing the page – 404 pops up)
2019-05-22 20 19 58

Expected behavior here is to get rid of 404 error and keep the address root "migrated_1_project/" in the URL

One more an obscure moment with images you can see on the last second of the gif.
Background illustration which located in the Header component stays visible but the image that crashes on the last second of the gif is inside Switch tag from React Router,

const App = () => 
    <Router >
        <div>
            <Header />
            <Switch>
                <Route path="/" component={Home} exact/>
                <Route path="/product" component={Product} exact />
                {/* <Route path="/team" component={Team} exact /> */}
                {/* <Route path="/blog" component={Blog} exact /> */}
                {/* <Route path="/contact" component={Contact} exact /> */}
                {/* <Route component={Error} /> */}
            </Switch>
            <Footer />
        </div>
    </Router>;

maybe it works in some unpredictable way?

Link to the repo:
https://github.com/kkdima/migrated_1_project

Any help would be appreciated 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants