Search code examples
reactjsreact-routerassetsreact-router-dom

Can React Router basename be configured to respect asset URLs in CSS?

I am using BrowserRouter as Router from react-router-dom. I want to host my application at a path that is not /. I used the basename attribute on the router tag, and it works great.

<Router basename={'/my-cool-path'}>

I am referring to images in my react components like this:

<img class="number" src="one.svg"/>

The HTML reference works great. But in my CSS files, this breaks:

background-image: url(one.svg);

I tried this but it breaks for prod builds (dev env works) :

background-image: url(/one.svg);

This works, but only for production builds (react-scripts build). It breaks during dev (react-scripts start command).

background-image: url(/my-cool-path/one.svg);

I want to be able to have CSS URL paths that work when I do BOTH a production build and during dev (hot reloading with react-scripts start command).

Any ideas for a solution? Is this possible?

Solution

  • Short answer: not the way you're hoping.

    Problem is, React is Javascript, and your CSS is not handled by Javascript.

    You could be saved, if you're compiling CSS - from SCSS for example - you could create a file ie. env-vars.scss, and have it define a variable like $basePath, setting it to /my-cool-path/. ( like $basePath: "/my-cool-path/";)

    Import that file into your main scss file, and have git (or whatever repo you use) ignore the file. Then you can manually recreate that file on the server, setting the $basePath to / ( $basePath: "/"; ).

    You can then use the $basePath in your urls in scss, say for example background-image: url($basePath + "img/some-background.png");

    When ever the scss is compiled, it'll pull the var from that file, and if your repo is ignoring it, you can create different values depending on the environment you're running the compile on.

    However building with react-scripts start and react-scripts build might also provide you a way to set an ENV variable and import it into your scss, but I'm not entirely familiar with this so I'd have to direct you to google for that one I'm afraid.

    If you're not compiling your CSS from a preprocessor, it'll be a tougher task.