TypeScript导入值是文件名而不是其内容

Question

我需要将自定义扩展名文件的内容作为字符串导入。

（我在名为simple.vert的文件中有WebGL顶点着色器）

我创建了一个文件extensions.d.ts

declare module '*.vert' {
    const value: string;
    export default value;
}

然后，在component.ts中，我写：

import SimpleVert from '../../shaders/simple.vert';
console.log(SimpleVert);

不幸的是，typeof Simplevert === 'string'是SimpleVert的值是/static/media/simple.e32079ee.vert，这是我想导入的文件名，而不是文件内容。

此外，当我尝试require(SimpleVert)时会引发错误：

Error: Cannot find module '/static/media/simple.e32079ee.vert'

我的目标是将文件内容简单地导入为字符串：

import SimpleVert from '../../shaders/simple.vert';

有什么想法吗？

P.S。 TypeScript版本为3.5.2

Answer 1

create-react-app设置Webpack。您应该将Webpack配置为使用raw-loader

之类的东西来导入.vert文件的内容