Не в состоянии использовать файлы стилуса

Question

Я пытаюсь использовать файлы стилуса в моем проекте. У меня есть компонент MenuPanel.js и файл стилуса sidebar.styl. Я пытаюсь импортировать этот файл стилей в Menupanel и позволить Menupanel использовать стили. Я делаю это так

файл sidebar.styl

:local(.container)


.navbar-side {
  position: absolute;
  background: rgba(255,255,255,0.15);
  width: 17 * 1.7vmin;
  top: 6.2 * 1.7vmin;
  padding-bottom: 2 * 1.7vmin;
  .tessact-logo {
    width: 50%;
    height: 12 * 1.7vmin;
    background: url('/public/images/logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-left: 25%;
  }
  .navbar-item {
    padding: 0.8 * 1.7vmin;
    transition: all 0.2s ease;
    cursor: pointer;
    padding-left: 3 * 1.7vmin;
    &:hover {
      background: rgba(255,255,255,0.15);
    }
    &.active {
      background: rgba(255,255,255,0.25);
    }
    .navbar-item-inside {
      display: none;
    }
  }
}

MenuPanel.js

import React, { Component } from 'react';

import c from './sidebar.styl';

class MenuPanel extends Component {
    render() {
        return (
            <div className={c.container}>
                <div className="navbar-side">
                    <div className="tessact-logo"></div>
                    <div className="navbar-item active">
                        <a className="navbar-item-link"><span className="fa fa-comment"></span> TRIVIA</a>
                    </div>
                    <div className="navbar-item">
                        <a className="navbar-item-link"><span className="fa fa-picture-o"></span> IMAGES</a>
                        <div className="navbar-item-inside">
                            <a className="navbar-item-inside-link">PERSONS</a>
                            <a className="navbar-item-inside-link">BRANDS</a>
                            <a className="navbar-item-inside-link">OBJECTS</a>
                        </div>
                    </div>
                    <div className="navbar-item">
                        <a className="navbar-item-link"><span className="fa fa-tags"></span> KEYWORDS</a>
                    </div>
                </div>
            </div>

        );
    }
}

export default MenuPanel;

Это мой загрузчик стилуса в файле config.js

{
                test: /\.scss$/,
                include: paths.appSrc,
                use: ['style-loader', 'css-loader', 'sass-loader?sourceMap=true']
},

Раньше я пытался использовать

{
                test: /\.styl$/,
                loader: [
                    'isomorphic-style-loader',
                    'css?sourceMap&localIdentName=[name]_[local]_[hash:base64:3]',
                    'stylus?sourceMap'
                ].join('!')
            },

Но это не сработало.

Что я делаю неправильно? Моя страница не становится стилизованной.