Question

在我的React应用程序中，我通过创建*.scss文件和jQuery移动侧边栏来利用SASS。然后对它们进行预编译，还创建*.scss.d.ts文件，这些文件用于通过import * as Style from "./filename.scss";将它们导入* .tsx文件，以便可以像Style.sidebar那样使用它们的条目。

目前，我在localIdentName的{{1}}中使用webpack.config.js设置生成名称，但我希望使用较少的全局名称，而更不用说本地名称，因此我考虑设置{{ 1}}至[local]。使用localIdentName可以使用，但是不能使用[name]_[local]_[hash:base64]。我不知道为什么。

使用的版本：

[local]

[name]_[local]_[hash:base64]中针对生成的CSS名称（localIdentName）的模块规则设置为"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

[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]设置一起使用？我该怎么做才能使其正常工作？

编辑1：

我认为带有[name]_[local]_[hash:base64]的{{1}}部分未正确转换为CSS。也许是编译错误？

[name]_[local]_[hash:base64]

和

scss

SASS localIdentName阻止CSS

0 个答案: