add the full semantic-ui package for styling

# The below will hang on: semantic-ui: Starting run setup
# yarnpkg/yarn#976 (comment)

yarn add semantic-ui --dev

# Kill the setup
# copy node_modules/semantic-ui/semantic.json.example > root/semantic.ui (and set autoInstall to true)

cp node_modules/semantic-ui/semantic.json.example semantic.json
# now set autoInstall to true and re-run yarn

yarn add semantic-ui --dev

# I'm not sure, but you may want to add dist/ to .gitignore
# This may require others to run gulp build for the semantic ui assets
# but may keep commits cleaner in the future (I dunno?)

# import css in your component: app/jacascript/packs/hello_react.jsx
# See readme for code that goes in here

# ALSO INCLUDE THE stylesheet_pack_tag with the same component name
# in the view: app/views/site/signup.html.erb
# (this wasted a lot of my time)

# see Readme for code that goes in here

# reloading the app should apply the semantic-ui styling

.gitignore

@@ -30,3 +30,5 @@
 yarn-debug.log*
 yarn-error.log*
 .yarn-integrity
+
+dist/

app/javascript/packs/hello_react.jsx

@@ -8,6 +8,8 @@ import PropTypes from 'prop-types'
 
 import { Button } from 'semantic-ui-react'
 
+import '../../../dist/semantic.min.css';
+
 const Hello = props => (
   <div>Hello {props.name}!</div>
 )

app/views/site/signup.html.erb

@@ -2,3 +2,4 @@
 <p>Find me in app/views/site/signup.html.erb</p>
 
 <%= javascript_pack_tag 'hello_react' %>
+<%= stylesheet_pack_tag 'hello_react' %>

gulpfile.js

@@ -0,0 +1,72 @@
+/*******************************
+            Set-up
+*******************************/
+
+var
+  gulp         = require('gulp-help')(require('gulp')),
+
+  // read user config to know what task to load
+  config       = require('./tasks/config/user'),
+
+  // watch changes
+  watch        = require('./tasks/watch'),
+
+  // build all files
+  build        = require('./tasks/build'),
+  buildJS      = require('./tasks/build/javascript'),
+  buildCSS     = require('./tasks/build/css'),
+  buildAssets  = require('./tasks/build/assets'),
+
+  // utility
+  clean        = require('./tasks/clean'),
+  version      = require('./tasks/version'),
+
+  // docs tasks
+  serveDocs    = require('./tasks/docs/serve'),
+  buildDocs    = require('./tasks/docs/build'),
+
+  // rtl
+  buildRTL     = require('./tasks/rtl/build'),
+  watchRTL     = require('./tasks/rtl/watch')
+;
+
+
+/*******************************
+             Tasks
+*******************************/
+
+gulp.task('default', false, [
+  'watch'
+]);
+
+gulp.task('watch', 'Watch for site/theme changes', watch);
+
+gulp.task('build', 'Builds all files from source', build);
+gulp.task('build-javascript', 'Builds all javascript from source', buildJS);
+gulp.task('build-css', 'Builds all css from source', buildCSS);
+gulp.task('build-assets', 'Copies all assets from source', buildAssets);
+
+gulp.task('clean', 'Clean dist folder', clean);
+gulp.task('version', 'Displays current version of Semantic', version);
+
+/*--------------
+      Docs
+---------------*/
+
+/*
+  Lets you serve files to a local documentation instance
+  https://github.com/Semantic-Org/Semantic-UI-Docs/
+*/
+
+gulp.task('serve-docs', 'Serve file changes to SUI Docs', serveDocs);
+gulp.task('build-docs', 'Build all files and add to SUI Docs', buildDocs);
+
+
+/*--------------
+      RTL
+---------------*/
+
+if(config.rtl) {
+  gulp.task('watch-rtl', 'Watch files as RTL', watchRTL);
+  gulp.task('build-rtl', 'Build all files as RTL', buildRTL);
+}

package.json

@@ -10,6 +10,7 @@
     "semantic-ui-react": "^0.77.2"
   },
   "devDependencies": {
+    "semantic-ui": "^2.2.13",
     "webpack-dev-server": "^2.11.1"
   }
 }

semantic.json

@@ -0,0 +1,22 @@
+{
+  "base": "",
+  "paths": {
+    "source": {
+      "config": "src/theme.config",
+      "definitions": "src/definitions/",
+      "site": "src/site/",
+      "themes": "src/themes/"
+    },
+    "output": {
+      "packaged": "dist/",
+      "uncompressed": "dist/components/",
+      "compressed": "dist/components/",
+      "themes": "dist/themes/"
+    },
+    "clean": "dist/"
+  },
+  "permission": false,
+  "autoInstall": true,
+  "rtl": false,
+  "version": "2.2.13"
+}