Building with webpack resolves @transition wrong

[mdhtr]

shapes.less contains this:

 .ui.shape.animating .sides {
  transition: @transition;
}

After providing my own themes.config, setting @transition to 'default' I get the following in the compiled semantic.css file:

.ui.shape.animating .sides {
  -webkit-transition: 'default';
  transition: 'default';
}

So it seems that @transition is resolved with the value in the themes.config file instead of the value in the shape.variables file.
This results in the shape animation transitions not working.

This is my webpack config for less files:

  module: {
    rules: [
      { test: /\.less$/, loader: ExtractTextPlugin.extract('css-loader?sourceMap!postcss-loader!less-loader?sourceMap') }
        ...
    ]
  },
  plugins: [
    ...
    new ExtractTextPlugin('./public/[name].css')
  ],
  devtool: '#source-map',
  entry: {
    semantic: './src/semantic.less'
  },
  output: {
    filename: './public/[name].css'
  }
};

[mdhtr]

I did a workaround with site overrides, so the animations would at least work:

in shape.overrides:

/* avoid naming collision with themes.config transition variable */
.ui.shape.animating .sides {
  transition: @shapeTransition;
}

in shape.variables:

@shapeTransition:
  transform @duration @easing,
  left @duration @easing,
  width @duration @easing,
  height @duration @easing
;

[seonghyeonkimm]

@mdhtr I am importing specific elements from semantic-ui-less. For example, I imported Dropdown and also js file, too. But, animation is not working. Maybe, this issue is also related to this?

[mdhtr]

@impressor615: Dropdown might depend on other components that you did not import. Try importing everything and verify if the dropdown animation still not works. If it works then try excluding components until just the necessary remain.
My guess is that you'll need the site, the reset and the transition components besides dropdown for dropdown to work properly (but I might also be wrong).