Semantic-ui: CSS not generated with build task

[loic294]

Hi,

I am new to semantic-ui. When I try to build the project the javascript and assests file are correctly builded but I have no CSS files that are builded at all. The build-css task runs but doesn't output any files. I am on a Windows 10 machine with Node v0.12.7 and NPM v2.11.3. I installed the files via NPM with npm install semantic-ui --save. I used the Express setting when configuring the project.

gulp build
[20:26:15] Using gulpfile ~\Documents\Projets\sofia-new\semantic\gulpfile.js
[20:26:15] Starting 'build'...
Building Semantic
[20:26:15] Starting 'build-javascript'...
Building Javascript
[20:26:15] Starting 'build-css'...
Building CSS
[20:26:15] Starting 'build-assets'...
Building assets
[20:26:16] Starting 'package uncompressed css'...
[20:26:16] Starting 'package compressed css'...
[20:26:16] Finished 'build-css' after 518 ms
[20:26:16] Finished 'package uncompressed css' after 79 ms
[20:26:16] Finished 'package compressed css' after 54 ms
[gulp] Created: ..\dist\components\site.js
[gulp] Created: ..\dist\components\site.min.js
[gulp] Created: ..\dist\components\form.js
[gulp] Created: ..\dist\components\accordion.js
[gulp] Created: ..\dist\components\form.min.js
[gulp] Created: ..\dist\components\checkbox.js
[gulp] Created: ..\dist\components\accordion.min.js
[gulp] Created: ..\dist\components\checkbox.min.js
[gulp] Created: ..\dist\components\dimmer.js
[gulp] Created: ..\dist\components\dimmer.min.js
[gulp] Created: ..\dist\components\dropdown.js
[gulp] Created: ..\dist\components\embed.js
[gulp] Created: ..\dist\components\dropdown.min.js
[gulp] Created: ..\dist\components\modal.js
[gulp] Created: ..\dist\components\embed.min.js
[gulp] Created: ..\dist\components\nag.js
[gulp] Created: ..\dist\components\modal.min.js
[gulp] Created: ..\dist\components\popup.js
[gulp] Created: ..\dist\components\nag.min.js
[gulp] Created: ..\dist\components\popup.min.js
[gulp] Created: ..\dist\components\progress.js
[20:26:19] Finished 'build-assets' after 3.89 s
[gulp] Created: ..\dist\components\rating.js
[gulp] Created: ..\dist\components\progress.min.js
[gulp] Created: ..\dist\components\rating.min.js
[gulp] Created: ..\dist\components\search.js
[gulp] Created: ..\dist\components\shape.js
[gulp] Created: ..\dist\components\search.min.js
[gulp] Created: ..\dist\components\sidebar.js
[gulp] Created: ..\dist\components\shape.min.js
[gulp] Created: ..\dist\components\sticky.js
[gulp] Created: ..\dist\components\sidebar.min.js
[gulp] Created: ..\dist\components\tab.js
[gulp] Created: ..\dist\components\sticky.min.js
[gulp] Created: ..\dist\components\tab.min.js
[gulp] Created: ..\dist\components\transition.js
[gulp] Created: ..\dist\components\transition.min.js
[gulp] Created: ..\dist\components\api.js
[gulp] Created: ..\dist\components\api.min.js
[gulp] Created: ..\dist\components\state.js
[gulp] Created: ..\dist\components\visibility.js
[gulp] Created: ..\dist\components\state.min.js
[gulp] Created: ..\dist\components\visibility.min.js
[20:26:22] Starting 'package compressed js'...
[20:26:22] Starting 'package uncompressed js'...
[20:26:22] Finished 'build-javascript' after 6.3 s
[20:26:22] Finished 'build' after 6.3 s
[gulp] Created: ..\dist\semantic-ui\semantic.min.js
[20:26:26] Finished 'package compressed js' after 4.55 s
[gulp] Created: ..\dist\semantic-ui\semantic.js
[20:26:26] Finished 'package uncompressed js' after 4.55 s

Here is my simantic.json file :

{
  "base": "semantic/",
  "paths": {
    "source": {
      "config": "src/theme.config",
      "definitions": "src/definitions/",
      "site": "src/site/",
      "themes": "src/themes/"
    },
    "output": {
      "packaged": "/dist/semantic-ui/",
      "uncompressed": "/dist/components/",
      "compressed": "/dist/components/",
      "themes": "/dist/themes/"
    },
    "clean": "dist/"
  },
  "permission": false,
  "rtl": "No",
  "version": "2.1.4"
}

[jlukic]

I'm unable to reproduce any issues using fresh version of SUI from NPM and your semantic.json file. Perhaps it's something else?

[loic294]

It must be another NPM module that is interfering with it. I tested it in a clean directory and in two other projects. It came out as expected in one of my projects and an in the clean directory. The two others are more complex project so it's hard to pin down the faulty module. Thanks for the answer!

[dopeboy]

In case anyone comes in here by way of google, the solution is here: https://github.com/Semantic-Org/Semantic-UI/issues/2971

[Mariyo]

Hi,
I've got similar issue on Windows 10. I did some changes in semantic.json, and finally recognized, that my Netbeans has re-formatted json. When I used one of online formatters, suddenly it started to build CSS again as expected.

Maybe this will help to somebody.