Get styleName errors, try to use this plugin with typescript and scss, mini-css-extract-plugin

i try to use .scss files in my project with this plugin.
success build and start dev server, but i get styleName errors like that.

what is strange is that only some styleNames(icon-size__small, icon-color__marine, icon-type__flag) do not work well.

first i get this errors, when use with classNames.
try to it without using classNames, but i got same errors.

```javascript
class Icon extends React.Component {
static defaultProps = {
iconSize: IconSize.SMALL,
iconColor: IconColor.MARINE,
}

constructor(props: Props) {
super(props);
this.state = {};
}

render() {
const { iconSize, iconColor, iconType } = this.props;
return (

);
}
}
```

my package.json
```json
"dependencies": {
"babel-polyfill": "6.26.0",
"classnames": "2.2.6",
"react": "16.6.0",
"react-dom": "16.6.0",
"react-router": "4.3.1",
"react-router-dom": "4.3.1",
"recompose": "0.30.0",
},
"devDependencies": {
"@types/classnames": "2.2.6",
"@types/react": "16.4.14",
"@types/react-css-modules": "4.6.2",
"@types/react-dom": "16.0.8",
"@types/react-redux": "6.0.9",
"@types/react-router-dom": "4.3.1",
"@types/react-router-redux": "5.0.16",
"autoprefixer": "9.3.1",
"babel-loader": "7.1.2",
"babel-plugin-react-css-modules": "3.4.2",
"babel-plugin-transform-react-jsx": "6.24.1",
"babel-preset-env": "1.7.0",
"babel-preset-react": "6.24.1",
"css-loader": "1.0.1",
"file-loader": "2.0.0",
"html-webpack-plugin": "3.2.0",
"mini-css-extract-plugin": "0.4.4",
"node-sass": "4.9.4",
"postcss-loader": "3.0.0",
"postcss-scss": "2.0.0",
"react-css-modules": "4.7.7",
"sass-loader": "7.1.0",
"style-loader": "0.23.1",
"ts-loader": "5.2.1",
"typescript": "3.1.1",
"uglifyjs-webpack-plugin": "2.0.1",
"webpack": "4.23.1",
"webpack-cli": "3.1.2",
"webpack-dev-server": "3.1.10"
}
```

my webpack.config.js
```javascript
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const SOURCE_DIRECTORY = path.resolve(__dirname, 'resources');
const OUTPUT_DIRECTORY = path.resolve(__dirname, 'build');
const MODULE_DIRECTORY = path.resolve(__dirname, 'node_modules');

module.exports = (env, argv) => {
const __DEV__ = argv.mode === 'development';
return ({
context: SOURCE_DIRECTORY,
entry: [
'babel-polyfill',
'./index.tsx'
],
output: {
filename: 'index.js',
path: OUTPUT_DIRECTORY,
publicPath: '/'
},
module: {
rules: [
{
include: SOURCE_DIRECTORY,
test: /\.(ts|tsx)$/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: __DEV__
}
},
'ts-loader'
]
},
{
include: SOURCE_DIRECTORY,
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
minimize: !__DEV__,
sourceMap: __DEV__,
localIdentName: __DEV__ ? '[hash:base64:5]' : null,
url: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: __DEV__
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: __DEV__
}
}
]
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
devServer: {
host: 'localhost',
port: 8082,
compress: true,
contentBase: __dirname,
historyApiFallback: true,
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new HtmlWebpackPlugin({
template: 'index.html',
filename: 'index.html'
}),
new MiniCssExtractPlugin({
filename: 'index.css'
}),
...(__DEV__ ? [] : [new UglifyJsPlugin()])
],
cache: false
});
};
```

my .babelrc
```json
{
"presets": [
[
"env",
{
"targets": {
"browsers": [
"IE >= 11",
"Edge >= 16",
"Chrome >= 64",
"Firefox >= 58",
"Safari >= 11"
]
},
"modules": false
}
],
"react"
],
"plugins": [
"transform-react-jsx",
[
"react-css-modules",
{
"context": "resources",
"filetypes": {
".scss": {
"syntax": "postcss-scss"
}
},
"handleMissingStyleName": "warn",
"generateScopedName": "[hash:base64]"
}
]
]
}
```

is it my mistake? or plugin bugs?

Comienza reproduciendo los errores de styleName indicados mediante el fragmento de componente, webpack.config.js y .babelrc mostrados en el issue. Rastrea cómo el plugin gestiona los nombres de clase calculados con módulos SCSS y MiniCssExtractPlugin; el trabajo estará terminado cuando los nombres de estilo de icono indicados se resuelvan sin errores en la configuración de TypeScript especificada.

Escrito por el modelo de indexación a partir del texto del issue.