CSS styles inside static folder do not load when there is a trailing slash on route

[itrevex]

Description

I picked up a template and converted to a react a component. I then decided to pass its styles through link tag in header of the page using react-helmet.
The styles work fine when I route the the page without no trailing slash but on routing to the pages with a trailing slash, the styles do not work. I have searched around but looks like the issue is unique to me

Steps to reproduce

1. Create gatsby project, I default starter for this project
2. Inside root folder, add a static folder
3. Add a custom.css file with some styles that will be referenced inside custom page
4. Create custom page in src/pages
5. Add link prop to SEO component and set it up correctly, this used to pass link to SEO component inside custom page
6. Inside custom_page.js and link to custom.css file using SEO component
7. Add <Link to "/custom_page" >custom page</Link> inside pages/index.js file
8. The page will load as required
9. The page won't load correctly when custom page is linked to using <Link to='/custom_page/'>Custom page</Link>
10. Refreshing the page too won't load the custom css styles

Clear steps describing how to reproduce the issue. Please please please link to a demo project if possible, this makes your issue much easier to diagnose (seriously).

What should happen?

Custom css should load in page when page is routed to with trailing slash

What happened.

Custom css does not load when page is routed to with trailing slash however, the link to the custom css file is available in the header tag

Environment

System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
Binaries:
Yarn: 1.12.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.4.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: ^2.0.117 => 2.0.117
gatsby-image: ^2.0.29 => 2.0.29
gatsby-plugin-manifest: ^2.0.17 => 2.0.17
gatsby-plugin-offline: ^2.0.23 => 2.0.23
gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6
gatsby-plugin-remove-trailing-slashes: ^2.0.7 => 2.0.7
gatsby-plugin-sharp: ^2.0.20 => 2.0.20
gatsby-source-filesystem: ^2.0.20 => 2.0.20
gatsby-transformer-sharp: ^2.1.13 => 2.1.13

[blakenoll]

Try importing the custom css file directly into custom_page.js instead of using the SEO component to add a link. The SEO component may be adding the link to the custom.css before the link to your regular CSS causing it to be overwritten.

Import 'pathToCustomCSS'

[itrevex]

Try importing the custom css file directly into custom_page.js instead of using the SEO component to add a link. The SEO component may be adding the link to the custom.css before the link to your regular CSS causing it to be overwritten.

Import 'pathToCustomCSS'

This worked for me and can use it as a solution for now but I am sure something can be done to make my earlier option work but that's for better coders than myself

[DSchau]

@itrevex PRs are more than helpful if you could share where things were confusing!

Generally - this is less a Gatsby issue and more a modern build process/expectation enabled with the rise of Webpack. This works the same way as tools like create-react-app!

That being said--sorry for the confusion here, and glad we have it ironed out. Closing this out, but please feel free to continue discussion if we can help further. Thanks!