Nested classes (SASS), wrong output (CSS)

[vladimir-djokic]

If I have a simple foo.scss:

.shell {

    &.path {
        background: linear-gradient(to right, #17202A, #212F3D);
    }

}

using webpack.config.js:

module: {
    rules: [
        {
            test: /\.scss$/,
            use: extractTextPlugin.extract({
                fallback: "style-loader",
                use:
                    isDevBuild
                        ? "typings-for-css-modules-loader?modules&namedExport&camelCase&localIdentName=[name]_[hash:base64]&sass"
                        : "typings-for-css-modules-loader?modules&namedExport&camelCase&localIdentName=[name]_[hash:base64]&sass&minimize"
            })
        },
    ]
},
plugins: [
    ...
    new extractTextPlugin("site.css")
]

I get (wrong) site.css output:

.Shell_2QRiEglvWZ4mcPjp67mAja {

    &.Shell_3D4R68K4RPOKDY6fLBEteJ {
        background: linear-gradient(to right, #17202A, #212F3D);
    }

}

I expected to see something like:

.Shell_2QRiEglvWZ4mcPjp67mAja.Shell_3D4R68K4RPOKDY6fLBEteJ {
    background: linear-gradient(to right, #17202A, #212F3D);
}

Is this issue with my configuration or issue with typings-for-css-modules-loader?

[vladimir-djokic]

Issue was with my configuration. The correct should be as following (you can use query strings as well):

{
    test: /\.scss$/,
    use: extractTextPlugin.extract({
        fallback: "style-loader",
        use: [
            {
                loader: "typings-for-css-modules-loader",
                options: {
                    modules: true,
                    localIdentName: "[name]_[hash:base64]",
                    camelCase: true,
                    namedExport: true,
                    minimize: !isDevBuild
                }
            },
            {
                loader: "sass-loader",
                options: {
                    sourceMap: true
                }
            }
        ]
    })
},

Now, I get correct .css output.

[pmkroeker]

Should this maybe be documented as the correct use case? I came across this issue today while using 'typings-for-css-module-loader?sass'. But making the sass loader go after solved it as above. Seems like using query strings does not use the sass loader