React 中的CSS 类名中含有“-”报错

问题描述：

import React from 'react';

import style from './scrollTabBar.css';

export default class ScrollTabBar extends React.Component {
    render(){

        return (
            <div className={style.swiper-tab}>123</div>
        );
    }
};

.swiper_tab{
    width: 100%;
    background-color: darkgrey;
}

webpack 打包时没有任何错误，但是在浏览器中运行时报错

问题原因：暂时未找到
解决方案：

1. 不使用“-”
2. 配置css-loader 的camelCase 选项，以驼峰化式命名导出类名，该参数默认是false，改为true

{
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定启用css modules
                            camelCase: true,
                            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                        }

import React from 'react';

import styles from './scrollTabBar.css';
// import {swiperTab} from './scrollTabBar.css';

export default class ScrollTabBar extends React.Component {
    render(){

        return (
            <div className={styles.swiperTab}>123</div>
        );
    }
};