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

1 Like
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.
14 Likes
5

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

2 Likes
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.

2 Likes
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.

16

Just execute the next command inside your meteor project:

add flemay:less-autoprefixer