css - 反応でCSSを使用する

Question

React の学習を始めたばかりで、css ファイルを組み込んで反応コンポーネント (サイドバーなど) のスタイルを設定しようとしていますが、Web ページにどのスタイルも表示されない理由がわかりません。index.js ファイルに css をインライン化しようとしましたが、それは機能しますが、すべてのスタイリング コードを css ファイルに移動しようとしています。sass loader と css loader をインストールして、それらを webpack.config.js ファイルに含めました。私は愚かなことを忘れているだけですか？

これが私のstyle.cssファイルです

.sidebar {
    position: fixed;
    height: 200px;
    font-size: 20;
    width: 60px;
    background-color: deepskyblue;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: azure;
}

li {
    display: block;
    color: gray;
    padding: 8px;
    font-size: 20;
    text-decoration: none;
}

li :hover {
    background-color: forestgreen;
}  

そして私のindex.jsファイル

import React from 'react'
import {styles} from './style.css'
import Home from './home.js'

export class Sidebar extends React.Component {
    render() {
        return (  
            <div className={styles.sidebar}>
                <ul>
                    <li>Home</li>
                    <li>Test1</li>
                    <li>Test2</li>
                </ul>
            </div>
        )   
    }
}