javascript - 每次使用 Typescript、Webpack 4 和 React 我包含一个 scss 文件时，样式名称在 className 中未定义

Question

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

我遇到的最大问题是很多教程和在线页面都推荐使用 ExtractTextPlugin，但这与 webpack 4 不兼容。这就是为什么我必须使用 MiniCssExtractPlugin 和 typings-for-css-modules-装载机。

下面是我的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 在模块 => 规则下包含以下内容以及其他用于处理我的 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>                  
        );        
    }
}

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

我觉得很奇怪，我可以引用样式，但我没有得到代表类的字符串。谁能指出我正确的方向？

Answer 1

我发现了问题。

问题是同时使用 MiniCssExtractPlugin 和样式加载器。这生成了样式对象试图引用的两个文件。

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

我需要一本带有值(value)字典的书。通过删除样式加载器，我只剩下字典文件而不是另一个文件，然后因为没有歧义，它选择了本地化的类名。

以下是我用于生成 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
            }
        }
    ]
}