[gulp build] command results missing CSS files in output components directory

[pzmosquito]

Steps

1. create an empty project, init package.json
2. npm install semantic-ui
3. in the Set-up Semantic UI screen:
   • Automatic -> Yes -> [ENTER] (default to semantic/) -> [ENTER] to install
4. npx gulp --gulpfile semantic/gulpfile.js build

Expected Result

generate JS and CSS files for components in semantic/dist/components

Actual Result

components missing .css and .min.css:
accordion, ad, card, checkbox, comment, dimmer, dropdown, embed, feed, item, modal, nag placeholder, popup, progress, rating, search, shape, sidebar, statistic, sticky, tab, table, transition, video

Version

Semantic-UI: 2.4.2
Node: 10.16.1
NPM: 6.11.1

[DevSDVI]

We encounter exactly the same problem. The same CSS files are missing after multiple way of installation.

Versions

Node: 10.16.3
NPM: 6.9.0
YARN: 1.17.3
Semantic-ui: 2.4.2
Gulp CLI: 2.2.0
Gulp: 3.9.1

Installation

On our project we work with Webpack and YARN so as usual, we tried to install semantic-ui with a semantic.json file. There is no YARN error during the installation but some CSS files are missing in the dist/components directory
By installing semantic directly with NPM & Gulp we get this error Cannot create property \'_index\' on string \'!important\' in file semantic/src/themes/default/collections/table.variables line no. 1
It seems the file src/themes/default/collections/table.variables prevent the LESS building to complete correctly.
This is the content of the src/semantic.less file

/* Global */
& { @import "definitions/globals/reset"; }
& { @import "definitions/globals/site"; }

/* Elements */
& { @import "definitions/elements/button"; }
& { @import "definitions/elements/container"; }
& { @import "definitions/elements/divider"; }
& { @import "definitions/elements/flag"; }
& { @import "definitions/elements/header"; }
& { @import "definitions/elements/icon"; }
& { @import "definitions/elements/image"; }
& { @import "definitions/elements/input"; }
& { @import "definitions/elements/label"; }
& { @import "definitions/elements/list"; }
& { @import "definitions/elements/loader"; }
& { @import "definitions/elements/placeholder"; }
& { @import "definitions/elements/rail"; }
& { @import "definitions/elements/reveal"; }
& { @import "definitions/elements/segment"; }
& { @import "definitions/elements/step"; }

/* Collections */
& { @import "definitions/collections/breadcrumb"; }
& { @import "definitions/collections/form"; }
& { @import "definitions/collections/grid"; }
& { @import "definitions/collections/menu"; }
& { @import "definitions/collections/message"; }
& { @import "definitions/collections/table"; }

/* Views */
& { @import "definitions/views/ad"; }
& { @import "definitions/views/card"; }
& { @import "definitions/views/comment"; }
& { @import "definitions/views/feed"; }
& { @import "definitions/views/item"; }
& { @import "definitions/views/statistic"; }

/* Modules */
& { @import "definitions/modules/accordion"; }
& { @import "definitions/modules/checkbox"; }
& { @import "definitions/modules/dimmer"; }
& { @import "definitions/modules/dropdown"; }
& { @import "definitions/modules/embed"; }
& { @import "definitions/modules/modal"; }
& { @import "definitions/modules/nag"; }
& { @import "definitions/modules/popup"; }
& { @import "definitions/modules/progress"; }
& { @import "definitions/modules/rating"; }
& { @import "definitions/modules/search"; }
& { @import "definitions/modules/shape"; }
& { @import "definitions/modules/sidebar"; }
& { @import "definitions/modules/sticky"; }
& { @import "definitions/modules/tab"; }
& { @import "definitions/modules/transition"; }

All the CSS files of the modules that are loaded after the table module are not build !
We don't have any real experience with both LESS and Gulp but we try to remove the !important from the line 75 @responsiveCellBoxShadow: none !important; of the src/themes/default/collections/table.variables file and the Gulp build complete normally and all CSS files are present as expected

Temp Solution

The only "solution" we found for now is to get the Semantic-ui CSS files directly from the dedicated repo semantic-ui-css and use this dependence instead of the main one

[ColinFrick]

This seems to be a problem with LESS 3.10.x. There is already an issue for this problem: less/less.js#3423

Explicitly installing a LESS version before 3.10 should also fix this problem.