0

我正在使用css-modules-typescript-loader在 webpack 应用程序中构建我的 css 模块，我什至正在使用模式：在我的 CI 中验证。这是我用 SASS 编写的 css 模块：

.MDButton {
    &-Container {
         dispaly: flex
    }

    &-Edit {
        > span > i:nth-child(2) {
            display: none;
        }
    }

    &-Command {
        border-color: transparent;
        background: transparent;
    }
}

当我在 webpack 开发模式下构建应用程序时，输出定义文件是：

// This file is automatically generated.
// Please do not change this file!
interface CssExports {
  'MDButton': string;
  'MDButton-Command': string;
  'MDButton-Container': string;
  'MDButton-Edit': string;
  'mdButton': string;
  'mdButtonCommand': string;
  'mdButtonContainer': string;
  'mdButtonEdit': string;
}
export const cssExports: CssExports;
export default cssExports;

当我在 webpack 生产模式下构建应用程序时，输出是：

// This file is automatically generated.
// Please do not change this file!
interface CssExports {
  'MDButton-Command': string;
  'MDButton-Container': string;
  'MDButton-Edit': string;
  'mdButtonCommand': string;
  'mdButtonContainer': string;
  'mdButtonEdit': string;
}
export const cssExports: CssExports;
export default cssExports;

不仅如此，当我在验证模式（和 webpack 生产模式）下运行我的 CI 过程时，我收到以下错误：

Module build failed (from ./node_modules/css-modules-typescript-loader/index.js):
Error: Generated type declaration file is outdated. Run webpack and commit the updated type declaration for '/Users/aguata/dev/Azure-IoT-Defender-Core-UI/src/components/button/MDButton.module.scss.d.ts'

   // This file is automatically generated.
   // Please do not change this file!
   interface CssExports {
 -   'MDButton': string;
 -   'MDButton-Command': string;
 -   'MDButton-Container': string;
 -   'MDButton-Edit': string;
 -   'mdButton': string;
 -   'mdButtonCommand': string;
 -   'mdButtonContainer': string;
 -   'mdButtonEdit': string;
 - }
 - export const cssExports: CssExports;
 +   'MDButton-Command': string;
 +   'MDButton-Container': string;
 +   'MDButton-Edit': string;
 +   'mdButtonCommand': string;
 +   'mdButtonContainer': string;
 +   'mdButtonEdit': string;
 + }
 + export const cssExports: CssExports;
 + export default cssExports;

    at getTypeMismatchError (/Users/aguata/dev/Azure-IoT-Defender-Core-UI/node_modules/css-modules-typescript-loader/index.js:19:10)
    at /Users/aguata/dev/Azure-IoT-Defender-Core-UI/node_modules/css-modules-typescript-loader/index.js:117:11
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:73:3)
 @ ./src/components/button/MDButton.module.scss 2:12-238 9:17-24 13:15-22
 @ ./src/components/button/MDButton.tsx
 @ ./src/components/button/index.ts
 @ ./src/index.ts
 @ multi ./src

我错过了什么？

4

0 回答 0