求解~ts如何校验css-module中的全局less变量？

Question

先贴上配置代码
tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "noImplicitAny": true,
    "module": "ESNext",
    "target": "es5",
    "jsx": "react",
    "types": ["webpack-env", "node"],
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "plugins": [{
      "name": "typescript-plugin-css-modules"
    }],
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

webpack.config.js

module.exports = {
  // 此处省略
  module: {
    rules: [
      { test: /\.(ts|tsx)$/, loader: 'ts-loader', exclude: /node_modules/ },
      {
        test: /\.module\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                auto: (resourcePath) => resourcePath.endsWith('.less'),  // 匹配.less文件来进行css模块化。
                localIdentName: '[local]_[hash:base64:10]',
              },
            },
          },
          'postcss-loader',
          'less-loader',
          {
            loader: 'style-resources-loader',
            options: {
              patterns: path.resolve(__dirname, '../src/styles/variable.less'), // 全局变量
            }
          }
        ],
      },
    ],
  },
};

variable.less
@primary-color: blue;

index.module.less

.contaier {
  color: red;
  width: 100px;
  height: 100px;
  background-color: @primary-color;
}

declaration.d.ts

declare module '*.less' {
  const content: Record<string, string>;
  export default content;
}

组件调用时ts识别成了这样，但是样式绑定成功了

如果注释掉变量，如下

.contaier {
  color: red;
  width: 100px;
  height: 100px;
  // background-color: @primary-color;
}

ts解析正常

想请教下怎么让ts不报这个警告（不用@ts-ignore）

Answer 1

react-app-env.d.ts的配置应该是这样吧。

declare module '*.module.less' {
    const classes: { readonly [key: string]: string };
    export default classes;
}

PS:你单词拼错了。container而不是contaier