Javascript 使用Typescript、Webpack4和React，每次我包含一个scss文件时，样式名在className中未定义

我正在使用Typescript和Webpack4构建一个React应用程序。我试图在我的组件中包含来自scss文件的类名，但是当我这样做时，类名是未定义的

我遇到的一个大问题是，很多在线教程和网页都建议使用ExtractTextPlugin，但这与Webpack4不兼容。这就是为什么我必须使用MiniCssExtractPlugin和css模块的typings加载程序

以下是我在my package.json中的依赖项

"devDependencies": {
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.7",
    "@types/react-redux": "^6.0.9",
    "@types/redux-saga": "^0.10.5",
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.2",
    "node-sass": "^4.9.3",
    "npm-check": "^5.8.0",
    "sass-loader": "^7.1.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.0",
    "typescript": "^3.0.3",
    "typings-for-css-modules-loader": "^1.7.0",
    "webpack": "^4.18.1",
    "webpack-cli": "^3.1.0"
},
"dependencies": {
    "es6-promise": "^4.2.5",
    "little-loader": "^0.2.0",
    "query-string": "^6.1.0",
    "react": "^16.5.0",
    "react-dom": "^16.5.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-saga": "^0.16.0"
}

我的webpack.config.js在module=>规则下包含以下内容，以及处理我的typescript文件等的其他内容

{
    test: /\.(s*)css$/,
    use: [
        "style-loader",
        {
            loader: MiniCssExtractPlugin.loader,
            options:
            {
                publicPath: path.resolve(__dirname, './dist')
            }
        },
        {
            loader: 'typings-for-css-modules-loader',
            options:
            {
                importLoaders: 1,
                modules: true,
                namedExport: true,
                camelCase: true,
                localIdentName: '[name]_[local][hash:base64:5]',
                banner: "// *** Generated File - Do not Edit ***"
            }
        },
        {
            loader: "sass-loader",
            options:
            {
                sourceMap: true,
                modules: true
            }
        }
    ]
}

我有一个名为map.styles.scss的scss文件，它只包含以下内容

.map-container {
    margin: 0 auto;
    overflow: hidden;    
}

当webpack构建运行时，它会生成名为map.styles.scss.d.ts的以下文件

// *** Generated File - Do not Edit ***
export const mapContainer: string;

我现在可以在typescript中引用该文件，并对类名进行适当的引用，如下所示

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import * as styles from './map.styles.scss';

export class Map extends React.Component {

    render() {        
        return (                    
            <div ref='map' className={styles.mapContainer}>         
                Loading map...                    
            </div>                  
        );        
    }
}

import*as React from'React'；
从“react dom”导入*作为react dom；
从“./map.styles.scss”导入*作为样式；
导出类映射扩展React.Component{
render（）{
报税表（
正在加载地图。。。
);        
}
}

问题是，虽然样式是一个对象，但mapContainer是未定义的。因此，在构建我的应用程序时，类名不存在，因为没有应用价值，因此样式不起作用

我发现很奇怪，我可以引用样式，但是我没有得到表示类的字符串。有人能给我指出正确的方向吗？

我发现了问题所在

问题是同时使用MiniCssExtractPlugin和StyleLoader。这将生成样式对象尝试引用的两个文件

其中一个生成了一个键字典，该字典将styles.mapContainer引用与一个值相匹配，另一个包含大量javascript，我对它的作用不是100%清楚

我需要一个有价值字典的。通过取出样式加载器，我只剩下字典文件，而不是另一个，然后因为没有歧义，它提取了本地化的类名

下面是我最后一个用于生成css的webpack配置

{
    test: /\.(s*)css$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options:
            {
                publicPath: path.resolve(__dirname, './dist')
            }
        },
        {
            loader: 'typings-for-css-modules-loader',
            options:
            {
                importLoaders: 1,
                modules: true,
                namedExport: true,
                camelCase: true,
                localIdentName: '[name]_[local][hash:base64:5]',
                banner: "// *** Generated File - Do not Edit ***"
            }
        },
        {
            loader: "sass-loader",
            options:
            {
                sourceMap: true,
                modules: true
            }
        }
    ]
}

---

既然您找到了解决方案，请接受此答案作为正确答案，将问题标记为已解决。