Classes not getting applied

I’m not really sure if this is a Semantic issue or a React issue…so I am going to try here first. I’m running Semantic UI React in Electron. The issue I am seeing is the full style isn’t getting applied from classes. For example I am trying to load a Flag element:

        <div>
          Flag<br />
          <Flag name="us" />
        </div>

However, the CSS definitions for i.flag.us aren’t getting loaded:

You can see that the sementic.css file is loaded, and the body styles have been applied, but not the i.flag.us styles. You can also see in the screenshot that this is happening for all the other styles as well (e.g. button). Any ideas?

[oullah]

I found a workaround. Instead of doing import 'semantic-ui-css/semantic.css', I copied semantic directly into my app and used a <link rel="stylesheet" href="./semantic/semantic.css"> tag instead. Would like to use the node module instead, any suggestions?

[SonataOto]

Super sorry to Necro this nearly 4 year old thread but I’ve run into the same thing today.

If I put import 'semantic-ui-css/semantic.min.css' into my index.tsx it isn’t respected by electron

But if I import the CSS in my index.html using:

<link
  async
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css"
/>
<script
  async
  src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.js"
></script>

Electron will respect semantics css.

Hi! Sorry about re-open this issues.

( If this is with “Webpack” dependency! ) You need import your css from node_modules to another css file in your app. https://github.com/webpack-contrib/sass-loader#imports

Something like this:

File: project_root/src/App.global.css

Code: @import '~css-dependency/bootstrap.css';

Prepend a “~” to css file paths that are in your node_modules!