Semantic UI not working


#1

Hi,

I have tried to install Semantic UI via the official package:

meteor add semantic:ui flemay:less-autoprefixer

The custom.semantic.json is created and filled, but the semantic code does not work in the browser.
It works if I install another package, but it is deprecated so I would rather go for the official one.

Any suggestion? Thanks


Does the official Semantic-UI-React work well with meteor? I want to move to Meteor
#2

The semantic:ui-css package worked for me. I think the official package is for using semantic themes.


#3

As per the “Usage” part of the README of that package:

Note: if you are happy with the default values you will need to remove .custom.semantic.json to generate Semantic UI.


#4

I had the same problem. Here is what I did to correct:

  1. The documentation mentions creating custom.semantic.json in the client/lib/semantic-ui folder. You must do this - create an empty file with this name somewhere in your structure (if you haven’t yet).
  2. Run your project (type “meteor” in your project’s folder).
  3. You will notice a new file is generated in the same folder you created the file mentioned in step 1. This file is called .custom.semantic.json (same name with period in beginning). STOP your meteor application so it isn’t running anymore (Control-C twice).
  4. DELETE the file .custom.semantic.json (the one with the period in front). DO NOT delete the one you created without the period in front.
  5. Run your project again. You will notice not only did the file with the period in front get created again, but all the files and folders needed for semantic-ui will also show up in the same folder and you should see the new look in your application’s screen.

#5

I just did a screen cast on this. Check out the last few minutes of https://www.meteorcasts.net/ep/7


#6

I watched it - great job on that screen cast. He’s right - you should watch it first and it will clear up everything.


#7

Have anyone successfully used semantic UI in a packages base structure rather than the client base structure? I’like to know how to achieve that :slight_smile:


#8

We achieved this a while ago, using the css files only. We forked the main library and customised it.

We added the generated css and js files to local package and in the package.js file:

api.use('jquery', 'client');

api.addFiles([
  'semantic.css',
  'semantic.js'
], 'client');

and the normal css processor picked it up.

To gain access to the js functionality in our other packages, we do api.use('custom:theme');

With this method we needed to copy the asset files (fonts etc) into the app public/assets/ folders so the app could find them.

This is one way of building the CSS, and using it with your packages.

There is currently an issue open here which talks about using the less files and having it compile within your application/package structure. I haven’t fully explored that as a possibility, as it would be great to be able to change the .less files for a custom theme without having to compile it externally, but at the same time our needs have the generated css used within external static sites as well.


#9

Really great screencast, helpful and professional – thanks @manuel


#10

Hi guys, my apologies but this is the post most related to my problem. I am using iron-cli in my application and decided to add semantic-ui. I followed all the integration procedures listed in http://semantic-ui.com/introduction/integrations.html#install-via-atmosphere but used the iron cli instead of meteor’s. after adding the postcss package in my-app\app\package.json and then doing meteor install npm as the instruction mentioned, I get an error that it is missing package.json and it couldn’t recognize the myapp directory. As I realized, because I created the app using iron, the normal npm install command no longer works. How do I run resolve this?

when trying to run the app anyway, I get this error.
While minifying app stylesheet:
error: Can’t load npm module ‘autoprefixer’ from
packages/minifier-postcss_plugin.js. Check your Npm.depends().


#11

Hi,

To me running “npm install --save autoprefixer” fixed it. Not sure why, but I found a similar error while going through forums


#12

Managed to get everything working after quite a few challenges. Summed up my errors/fixes on semantic ui’s github:


#13

Thanks joaobarcia. I found the problem by following the link you posted.

Just needed to rename one of the files to make it work.


#14

Thank you so much, I didn’t find a way to install it without your trick. This should totally be in semantic-ui website’s integration page


#15

Thanks, mate. This solved my problem.