Semantic-ui-react: correct way to import CSS ?

[raptoria]

I am using Webpack 1.

I tried to import the styles from 'semantic-ui-css' npm package into my React root component but got a bunch of errors related to file-loader and url-loader.

importing the stylesheet for semantic-ui-react using this link in my index.html works fine:

what is the optimal way to load in the CSS if I am using semantic-ui-react ?

[levithomason]

These are expected webpack errors, please consult the webpack docs for usage.

Acceptable approaches to setting-up CSS are outlined here: http://react.semantic-ui.com/usage#css

[levithomason]

You can also reference our webpack config and /docs directory, since, the docs are built with webpack. We use cdnjs for CSS with an option to use the locally installed semantic-ui-css package instead.

[raptoria]

thanks!

[tylerzika]

The instructions are not very clear. I installed the UI and CSS and am getting an error.

Uncaught ReferenceError: jQuery is not defined

What I don't understand is it clearly states semantic for react is jQuery free.

This is what my index.js looks like

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'semantic-ui-css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

[tylerzika]

Noobie mistake sorry. This did the trick.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'semantic-ui-css/semantic.min.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

[isGabe]

I just went through the same head scratch. A bit of documentation on exactly how to include the CSS would be nice for old knuckle draggers like myself.

[levithomason]

PRs very welcome. We have both a usage page and an examples directory that can be extended.

[lsilva-kununu]

@tylerzika is not working :/

[kartik2014]

Hi @levithomason , first of all, congratulations on putting up such a great library , it is compelling.

I have few questions:

1. Docs say webpack 1 is supported but not recommended. I am using Create React App which comes with webpack version 1.14.0. So does that mean I should not use Semantic-UI-React with CRA?

2. For styling, I also want some custom styles in my project , so I went with third option of Semantic UI package mentioned in the docs..
   npm install semantic-ui --save-dev runs gulp internally and creates a semantic folder. But there is no dist folder as mentioned in the docs. Where I should refer the semantic.min.css from in my index.js file?

I am basically trying to use Semantic-UI-React with semantic.min.css with some of my own styles on top of it. But it seems I am making some mistake in the setup. Another option may be to go ahead with Semantic UI CSS package ? ...but according to docs I will not be able to use custom styles with this method.

I am a bit confused here , please help :)

[parthamittra]

the import in App.js worked perfectly for me! thanks very much!

[levithomason]

Others landing here, please see the README.md examples and usage docs on this.