Use Semantic-UI css

Thanks for this great boilerplate project. I am trying to use Semantic-UI with it, but am having problems.

Semantic-UI consists of the semantic-ui-react package (containing components) and the Semantic-UI CSS, which you need to load separately. The components are working fine, but I cannot get the CSS to load.

Here's what I've tried:

• adding <link rel="stylesheet" ...> to index.html; this just causes the page to go blank; the CSS loads successfully but the app does not load
• import 'semantic-ui-css' in app.js; this gives me jQuery is not defined, as it needs jQuery
• add the below into app.js; this avoids all errors but the CSS still does not get loaded into the page (i.e. my components appear but unstyled)

const jQuery = require('jquery');
document.jQuery = jQuery;
window.jQuery = jQuery;
require('semantic-ui-css');

There are no other errors that appear in the devtools console, and I'm a little stuck. Are you able to help me debug this? The alternative is to bring Webpack in and see if that helps; I'm resisting this as the app is meant to be lightweight and low-complexity.

[pronebird]

Hi,

I am sure you should be able to include the CSS from node_modules/ folder or copy it from their CDN and add it to the app resources.

In my opinion this question belongs on Stackoverflow.com and is not specific to this boilerplate.

Well I thought so too. This app was using a different Electron setup before and it did indeed work fine via import 'semantic-ui-css/semantic.min.css';, however on switching to this one it no longer works, so I think the issue is probably to do with this project.

I did try using extraFiles and extraResources to include the CSS but the file never showed up in build/ after running pack. Can you specify a file inside node_modules from extraResources or extraFiles? It wasn't clear to me whether those settings start from the project directory or from the app subdirectory.

[pronebird]

@jonnyt886 import statement in JavaScript/ES6 is only used for the source code.

It's likely that either Webpack plugin or Babel plugin was used in the boilerplate you have used before.

Unfortunately, I do not use semantic-ui nor have any knowledge about that library.

It would be the best if you asked that question on StackOverflow. I am pretty sure there are many people with the same problem who can help you locate the CSS file inside of node_modules folder.

Shot in the dark, but I'd look at node_modules/semantic-ui-css/semantic.min.css

Also: the app/ folder is entirely copied into the app built with electron-builder. So I guess adding anything under app or app/renderer should automatically be added to the build.

Thanks. Not the most elegant fix, as I'll have to remember to copy it in every time the lib is upgraded, but it does work. For the benefit of others who see this, copy semantic.min.css into /app/renderer and then add this to index.html:

<link rel="stylesheet" href="./semantic.min.css"></link>