Используя Typescript, Webpack 4 и React каждый раз, когда я включаю файл scss, имя стиля не определено в className

Question

Я создаю приложение React, используя Typescript и Webpack 4. Я пытаюсь включить имена классов из файла scss в мои компоненты, но когда я делаю это, имя класса не определено.

Большая проблемаУ меня есть то, что многие учебники и страницы в Интернете рекомендуют использовать ExtractTextPlugin, но это не совместимо с веб-пакетом 4. Поэтому я должен использовать MiniCssExtractPlugin и загрузчик typings-for-css-modules-loader.

Ниже приведены мои зависимости в моем 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 => rules вместе с другими вещами для обработки моих файлов машинописи и т. Д.

{
    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
            }
        }
    ]
}

У меня есть файл scss с именем map.styles.scss, который содержит только следующие элементы:

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

При запуске сборки веб-пакета создается следующий файл с именем map.styles.scss.d.ts

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

Теперь я могу ссылаться на файл в моей машинописи с соответствующей ссылкой на className следующим образом

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 и style-loader.Это сгенерировало два файла, на которые пытался ссылаться объект стилей.

Один сгенерировал словарь ключей, который соответствовал ссылке styles.mapContainer со значением, а другой содержал загрузку javascript, которая мне не ясна на 100% относительно того, что она сделала.

Мне нужно былоодин со словарем значений.Выняв загрузчик стилей, я остался с файлом словаря, а не с другим, и потому, что не было никакой двусмысленности, он выбрал локализованные имена классов.

Ниже приведена моя последняя конфигурация веб-пакета для генерацииcss.

{
    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
            }
        }
    ]
}