15

I want to build a web client using react.js and semantic ui. There is a node package to use semantic-ui with react.js; semantic ui react. I have already installed this package on my computer following the instructions on react.semantic-ui.com/usage, but upon testing the with a simple webpage.

I think I have this issue because I failed to use this last instruction: import '.../semantic/dist/semantic.min.css';. The semantic folder has been generated in my project main folder, but the dist folder and the semantic.min.css have not been generated yet. Where and how should I use this?

NB: I also tried adding this <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link> to my index.html page and the page was style as expected. I don't want to use this option as I cannot change the them with it.

Community
  • 1
  • 1
cdaiga
  • 4,861
  • 3
  • 22
  • 42
  • I have succeeded to generate the `semantic/dist/*` files. I don't know yet how to `import '.../semantic/dist/semantic.min.css'` and where to import it. – cdaiga Nov 25 '16 at 13:12
  • `semantic-ui-css` is a package dependency of SUIR – Flint May 28 '20 at 12:17

5 Answers5

29

First - install css npm install semantic-ui-css --save
Then - import in at the index.js page (the very top level)
import 'semantic-ui-css/semantic.min.css';

Arif Dewi
  • 2,222
  • 26
  • 14
  • 2
    Though if you want a custom build (say a theme), you'd need to `npm install semantic-ui` and run the gulp build task (or add it to the CI) : https://semantic-ui.com/introduction/build-tools.html – challet Nov 26 '19 at 23:26
  • thanks. why does it have to import in the index.js page? – justin Apr 08 '20 at 06:35
  • just to be included in the final bundle, and be available everywhere. – Arif Dewi Apr 14 '20 at 07:33
6

First, use one of below package managers to install semantic UI react package.

For npm users:

npm install semantic-ui-react

For yarn users:

yarn add semantic-ui-react

Then add this import line to your index.js

import 'semantic-ui-css/semantic.min.css'

That's all.

Wayne Phipps
  • 2,019
  • 6
  • 26
  • 31
Pasindu Dineth Peiris
  • 164
  • 2
  • 12
2

For npm user: 

npm i semantic-ui-react semantic-ui-css
Manchanayakage Shalika Prasad
  • 119
  • 2
  • 11
0

semantic-ui-css is a package dependency of Semantic-ui-react (SUIR) and is the css only distribution with a unique theme. Semantic-ui is written in Less and provides a larger and finer control (per component) over the production of the final stylesheet (dist/semantic.min.css). It delivers several themes easy to derive to create your own, and a proper picture about how to keep a big and complex css well organized and not invasive with less.

in node v12, the installation of sui-css may fail, complaining that ReferenceError: primordials is not defined. See https://stackoverflow.com/a/58394828/1874016.

You can also git clone https://github.com/semantic-org/semantic-ui apply the patch above in here. and yarn install

Note the default semantic.min.css size is 628Kb and you probably don't need the styling for all the components it has.

Flint
  • 1,651
  • 1
  • 19
  • 29
-1
npm install sematic-ui-react sematic-ui-css --save
Mbanda
  • 968
  • 11
  • 21