TypeScript + Babel + Jest 不使用 moduleNameMapper 来减少文件

Question

我将我的笑话配置设置为 map any.less 和.css 导入到identity-obj-proxy模块，基本上在现有的每个文档引用/教程中都有规定。

module.exports = {
  // ...
  moduleNameMapper: {
    '\\.(css|less)$': 'identity-obj-proxy',
  },
};

但是，我发现当a.less文件包含一些无效css的forms（例如单行注释，调用mixins等）时，导入的object是空的。 这使我发现映射甚至没有被触发，并且一些其他机制（我还没有弄清楚，因为我没有设置这个项目）一直在从样式表生成 class 名称，而不是简单地使用代理。

import styles from './my-style-sheet.less'; // styles = {}
import * as styles from './my-style-sheet.less'); // styles = { default: {} }
import styles from './not-a-real-file.less'); // styles = {}
const styles = require('./my-style-sheet.less'); // styles = {}

对我来说真正奇怪的是，当我在调试并评估表达式require('./my-style-sheet.less')时，它确实导入了代理模块。 事实上，我可以要求任何以.less结尾的东西，它会导入代理，不管文件是否存在——这是我所期望的。

moduleNameMapper中的其他模式正常工作，例如一些路径别名。

module.exports = {
  // ...
  moduleNameMapper: {
    '^common': '<rootDir>/src/components/common',
  },
};

我不知道发生了什么，也不知道如何调试它。

Answer 1

事实证明这是我们的babel.config.js的问题。 我们正在添加babel-plugin-css-modules-transform插件，它显然取代了moduleNameMapper条目。