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

help
1

Hi, there.

Currently I am working on an app with Express, React and Semantic-UI-React. I am considering moving to Meteor, but does Meteor work well with the official Semantic-UI-React?

2

What is your question about? You can use all the npm packages like in any node app. All the same, except the fact, you should know how Meteor works)

3

Thanks, mrzafod.

I read this post which seems there may be a problem when integrating Semantic UI into Meteor. So I wonder if Semantic-UI-React has problem too.

Anyway, I haven’t worked out the tutorial, so maybe I should do that first.

4

PM me and I can help you with it.

5

Yes! I love SUI. We did https://blackship.com with it. I’ve also used it for a bunch of static sites. Like the home page here https://whiterabbitexpress.com

I’m also the admin at forums.semantic-ui.com

6

Sounds great! Thanks, maxhodges!

7

We aren’t using that less-autoprefixer and jquery package because we went with react-semantic-ui (which is jquery free).

Trying to get them to clarify who should and shouldn’t go with that install procedure

8

@maxhodges @ralpheiligan how does one go about adding react-semantic-ui to meteor?

9

Install the sui css then React-sui components separately

https://semantic-ui.com/introduction/integrations.html

10

It seems that that this works in Meteor 1.8:

Meteor Packages

meteor remove standard-minifier-css
meteor remove semantic:ui juliancwirko:postcss less
# no need for this: jquery

npm packages in package.json

meteor npm install --save semantic-ui-react
meteor npm install --save-dev autoprefixer postcss@^6.0.22 postcss-load-config@^1.2.0 postcss-easy-import

Add to package.json

  "postcss": {
    "plugins": {
      "postcss-easy-import": {},
      "autoprefixer": {
        "browsers": [
          "last 2 versions"
        ]
      }
    },
    "excludedPackages": []
  },

The postcss-easy-import helps avoid annoying warnings like:

app/client/lib/semantic-ui/semantic.less: warn: There are some @import rules those are not taking effect as they are required to be in the beginning of the file.

Follow the instructions to “generate Semantic UI” at https://github.com/Semantic-Org/Semantic-UI-Meteor#usage

To get the CSS included, put (something like) this somewhere after the client entry point:

import './lib/semantic-ui/semantic.less';

The extra code generated (duplicated in semantic-ui-react) should be excluded by the bundler.

2 Likes