Semantic UI themeing doesn't work

vmhackberry commented 6 years ago

The custom theming instructions are a little weak.

I ran: ember install semantic-ui-ember ember generate semantic-ui-ember.

Then I made modifications to my theme.config file in the semantic directory and did a gulp build, but the css in the app appears to be the same as the one from node_modules.

What do I need to do to make it use the newly built ones?

lifeart commented 6 years ago

same for me

DVG commented 6 years ago

I just worked through this myself!

Two things:

It puts things in the default base directory of app_root/semantic and then will dynamically attempt to import them from the dist directory inside of them.
ember's build system disallows you from importing vendor files that aren't part of the vendor or node_modules directory.

So make the following changes to semantic.json and run gulp build

{
  "base": "semantic/",
  "paths": {
    "source": {
      "config": "src/theme.config",
      "definitions": "src/definitions/",
      "site": "src/site/",
      "themes": "src/themes/"
    },
    "output": {
      "packaged": "../vendor/semantic/dist/",
      "uncompressed": "../vendor/semantic/dist/components/",
      "compressed": "../vendor/semantic/dist/components/",
      "themes": "../vendor/semantic/dist/themes/"
    },
    "clean": "vendor/semantic/dist/"
  },
  "permission": false,
  "autoInstall": true,
  "rtl": false,
  "version": "2.2.14"
}

This will output your built CSS to vendor/semantic/dist instead of semantic/dist.

Then you need to add to ember-cli-build.js

'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    SemanticUI: {
      source: {
        css: 'vendor/semantic/dist',
        javascript: 'vendor/semantic/dist',
        images: 'vendor/semantic/dist/themes/default/assets/images',
        fonts: 'vendor/semantic/dist/themes/default/assets/fonts'
      },
    }
  });
  return app.toTree();
};

This will tell ember where to look for the assets when building vendor.js and vendor.css

jenweber commented 5 years ago

There is a logic mistake in the addon's JavaScript that causes it to never read the options passed in by the consuming app. See PR https://github.com/Semantic-Org/Semantic-UI-Ember/pull/242 with a fix.

@DVG I was not able to get your example working. Was there anything else you had to do to make this work? Thanks!

gibso commented 5 years ago

This is awesome @jenweber, @championswimmer when can we expect a release of that? :-)

Semantic-Org / Semantic-UI-Ember

Semantic UI themeing doesn't work #238