Making External Library(Semantic ui React) and CSS module work with webpack css-loader

问题

I'm trying to make semantic-ui-react library to work with CSS module.

My application uses babel-plugin-css-module.

This is my css-loader configuration

{
        test: /\.css$/i,
        use: [
          {
            loader: ExtractCssChunks.loader,
            options: { hot: true }
          },
          {
            loader: "css-loader", //generating unique classname
            options: {
              importLoaders: 1, // if specifying more loaders
              modules: true,
              sourceMap: true,
              localIdentName: "[path]___[name]__[local]___[hash:base64:5]" //babel-plugin-css-module format
              //localIdentName: "[path][name]__[local]" //recommended settings by cssloader#local-scope , this option generate unique classname for compiled css
            }
          }
        ]
      },

i was using semantic components(divider/button).

import { Button, Divider } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";

render(){
            <Divider />
            <Button styleName="ui button primary">Primary</Button>
            <Button styleName="secondary">Secondary</Button>
}

will process to

<div class="ui divider"></div>
<button class="ui button node_modules-semantic-ui-css-___semantic-min__ui___16nX8 node_modules-semantic-ui-css-___semantic-min__button___1EWXU node_modules-semantic-ui-css-___semantic-min__primary___12JJH">Primary</button>
<button class="ui button node_modules-semantic-ui-css-___semantic-min__secondary___3VBpQ">Secondary</button>

• Primary button works because of ui button in stylename as it match with the generated semantic-ui-min.css which contains locally scoped class. **However,default .ui.button is still there.

• Secondary button does not work because default style of ui button does not correspond with generated css.

i know there are solution such as creating multiple rules of css-loader specifically for ./src and ./node_modules folder. e.g Using Semantic UI With CSS Modules in Webpack.

But this solution does not make the class in semantic.ui.min.css as css module. i do not want the class to be in the global scope.

---

Objective

The default style for button does not conform with css module. How do i resolve this? This applies to divider too..

or

is there a way i can get rid of the default style produced from semantic component?

来源：https://stackoverflow.com/questions/57241286/making-external-librarysemantic-ui-react-and-css-module-work-with-webpack-css