Not working with css-loader 7.1.2

[diabhoil]

When using the newest version of the css-loader (7.1.2) I could not generate the files correctly.

The *.sass.d.ts files where "empty":

// This file is automatically generated.
// Please do not change this file!
interface CssExports {
}
export const cssExports: CssExports;
export default cssExports;

After changing the version of css-loader to 6.8.1 everything was working like excepted. The output of the newest css-loader version is looking a bit different to the output of the older version.

[ilyabaykalov]

I encountered the same problem

[Andrei15193]

Same here, using version 6 fixed it for me. Thanks!

[kirilldronkin]

Starting with v7, you need to set modules.namedExport to false to keep it working

[Ch-Valentine]

if you need to use named export, you can use css-modules-dts-loader

[aidatorajiro]

It worked after I set the css-loader option esModule to false.

It seems that this project requires css-loader exports an object containing CSS name fields as the default export. As of now, css-loader exports CSS name fields as individual exports (not default export). To deactivate this feature you need to add something like

{
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-modules-typescript-loader",
{
  loader: "css-loader",
  options: {
    modules: true,
    esModule: false
  }
},
"sass-loader"
]
}

Or like

{
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-modules-typescript-loader",
{
  loader: "css-loader",
  options: {
    modules: { mode: "local", namedExport: false },
  }
},
"sass-loader"
]
}

to the webpack module rules config.

[vcherevatyi-smartling]

{
        test: /\.module\.(css|postcss|pcss|scss|sass|less|styl|sss)$/i,
        use: [
          "style-loader",
          {
            loader: "css-modules-dts-loader",
            options: {
              // Convert CSS class names to camelCase (default: false)
              camelCase: true,
              // Quote style: "single" or "double" (default: "double")
              quote: "single",
              // Indentation style: "tab" or "space" (default: "space")
              indentStyle: "space",
              // Number of spaces if indentStyle is "space" (default: 2)
              indentSize: 2,
              // Mode: "emit" to generate or "verify" to check the file (default: "emit")
              mode: isProduction ? "verify" : "emit",
              // Sort the exported class names alphabetically (default: false)
              sort: true,
              // Use named exports instead of interface (default: true), should be the same with `css-loader` namedExport option
              namedExport: true,
              // Custom banner comment at the top of the file
              banner: "// This file is automatically generated.\n// Please do not change this file!"
            }
          },
          "css-loader"
        ]
      }