score:1

Accepted answer

yes, what you want to achieve is to load the css resource as a render blocking resource, which means the browser will load the resource first before rendering the content.

this has nothing to do with react or your build tooling, but rather how web pages work.

this can be achieved by moving the element from your app component to your document . so, move your line to the index.html file that is in the public folder.

your index.html will then look something like this:

<!doctype html>
<html lang="en">
   <head>
     <meta charset="utf-8" />
     ...
     <title>react app</title>
     <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" />
   </head>
   <body>
   ...

please note, that from web performance point-of-view it is recommended to add the css resource only after your title attribute, so that the title gets "rendered" before the browser starts fetching the css resource.


Related Query

More Query from same tag