A question in React+TypeScript+WebPack with typings-for-css-modules-loader

Question

webpack.config.js

 {
    test: /\.scss$/,
    use: [
      "style-loader",
      {
        loader: "typings-for-css-modules-loader",
        options: {modules: true,nameExport: true,camcelCase: true,sass: true}
      },
      "sass-loader"
    ]
  }

when I run 'npm run dev',error happend. And when I modify the index.scss file,no declare file like 'index.scss.d.ts' to created.

Uncaught Error: Module build failed (from./node_modules/typings-for-css-modules-loader/lib/index.js):

Error: Cannot find module 'css-loader/locals' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)

Can you tell me how to fix it? thank you!

Answer 1

Now I fix it.Update css-loader v2.0 to v1.0.That is ok! here

Answer 2

He means degrade to v1.0... Even now in 2021, the problem is still there, you have to choose between latest css-loader and typings-for-css-modules-loader... I checked the github repository and found the project hasn't been upgrated for 4years

Answer 3

try out this webpack loader: React-css-components loader

configuration example with nextjs

const nextConfig = {
  webpack: (config, { dev, isServer }) => {
    const rccLoaderRule = {
      test: /\.module\.scss$/,
      use: [
        {
          loader: 'rcc-loader',
          options: {
            enabled: !!dev && isServer,
            exportStyleOnly: true
          }
        }
      ]
    }

    config.module.rules = config.module.rules ?? []
    config.module.rules.push(rccLoaderRule)

    return config
  }
}