SASS localIdentName блокирует CSS

Question

В своем приложении React я использую SASS, создав *.scss файлы и jQuery для перемещения боковой панели.Затем они прекомпилируются, также создаются *.scss.d.ts файлы, которые используются для импорта их в * .tsx файлы с import * as Style from "./filename.scss";, так что их записи могут использоваться как Style.sidebar.

В настоящее время я генерирую имена спараметр localIdentName в webpack.config.js с [local], но мне бы хотелось, чтобы это было менее глобальным и скорее локальным, поэтому я подумал о настройке localIdentName в [name]_[local]_[hash:base64].С [local] это работает, но не работает с [name]_[local]_[hash:base64].Я не могу понять, почему.

Используемые версии:

  "dependencies": {
    "@types/jquery": "^3.3.22",
    "@types/react": "^16.4.18",
    "@types/react-dom": "^16.0.9",
    "@types/react-router-dom": "^4.3.1",
    "bootstrap": "^4.1.3",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.4",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-router-dom": "^4.3.1"
  },
  "devDependencies": {
    "autoprefixer": "^9.3.1",
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.10.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
    "tslint": "^5.11.0",
    "typescript": "^3.1.6",
    "typings-for-css-modules-loader": "^1.7.0",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }

Настройки правил модуля в webpack.config.js для сгенерированных имен CSS (localIdentName): [local]:

        {
            test: /\.scss$/,
            exclude: /\.global.scss$/,
            use : [
                { loader: "style-loader" },
                { loader: "typings-for-css-modules-loader", options: { modules: true, namedExport: true, camelCase: true, localIdentName: "[local]" }},
                { loader: "postcss-loader", options: { plugins: function () { return [ require("autoprefixer") ]; }}},
                { loader: "sass-loader" }
            ]
        },

        {
            test: /\.scss$/,
            include: /\.global.scss$/,
            use : [
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "postcss-loader", options: { plugins: function () { return [ require("autoprefixer") ]; }}},
                { loader: "sass-loader" }
            ]
        }

Файл scss выглядит следующим образом:

.tourDisplay {
    /* padding: 0.5rem 1rem; */
    padding: 0;
}

.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
    min-width: 250px;
    max-width: 250px;
    min-height: 100vh;
}

#sidebar.active {
    margin-left: -250px;
}

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }

    #sidebar.active {
        margin-left: 0;
    }
}

Файл tsx выглядит следующим образом:

import * as $ from "jquery";
import * as React from "react";
import * as Style from "./TourDisplay.scss";

export interface TourDisplayProps {
    match: any;
}

export interface TourDisplayStats {
}

export class TourDisplay extends React.Component<TourDisplayProps, TourDisplayStats> {
    public render() {
        return <div className={Style.tourDisplay + " bg-white text-dark"}>

            <div className={Style.wrapper}>

                <nav id={Style.sidebar}>
                    Sidebar
                </nav>

                <div id="content">
                    <button type="button"
                            className="btn btn-info"
                            onClick={() => this.handleToggleClick()}>
                        Toggle Sidebar
                    </button>
                </div>
            </div>

        </div>;
    }

    private handleToggleClick() {
        const sidebarId: string = "#" + Style.sidebar;
        $(sidebarId).toggleClass("active");
    }
}

Теперь, чтобы подвести итог.Все отлично работает с [local], нажатие кнопки перемещает боковую панель.Если я установлю на [name]_[local]_[hash:base64] нажатие кнопки, то ничего не происходит, следовательно, она не работает.

Почему она не работает с настройкой [name]_[local]_[hash:base64]?Что я должен сделать, чтобы заставить его работать?

Редактировать 1:

Я считаю, что scss часть с #sidebar.active не переведена в CSS правильно.Может быть ошибка компиляции?

#sidebar.active {
    margin-left: -250px;
}

и

@media (max-width: 768px) {
    #sidebar.active {
        margin-left: 0;
    }
}