Reactjs 在网页包中使用TypeScript、样式化组件和PostCSS

我使用webpack使用TypeScript编写的样式化组件构建react应用程序。我还使用POSTSS和autoprefixer来支持旧浏览器上的CSS网格。编译工作正常，但生成的源映射不正确。如果我在Chrome中查看它们，“原始源代码”显示PostCs的输出，而不是原始tsx源代码。这是我的webpack.config.js（在tsconfig.json中启用了sourcemaps）：

这是我的测试文件GridTest.tsx：

import * as React from "react";
import styled from "styled-components";

export const GridTest = styled(() => <div />)`
& {
   display: grid;
}
`;

import*as React from“React”；
从“样式化组件”导入样式化；
export const GridTest=styled（（）=>）`
& {
显示：网格；
}
`;

这是GridTest.tsx的“原始源”，如Chrome开发工具中所示：

import * as React from "react";
import styled from "styled-components";

export const GridTest = styled(() => <div />)`
& {
   display: -ms-grid; // this line should not be here
   display: grid;   
}
`;

import*as React from“React”；
从“样式化组件”导入样式化；
export const GridTest=styled（（）=>）`
& {
display:-ms grid；//此行不应在此处
显示：网格；
}
`;

我找不到任何关于webpack在使用多个加载程序时如何生成源地图的信息。我假设webpack会将第一个源映射（来自postcss加载程序）应用到第二个源映射（来自ts加载程序），并生成一个最终源映射，该映射从最终输出指向原始文件，但不幸的是，情况并非如此。我调试了ts加载器的源代码，并将POSTSS加载器的源代码映射传递给它，但ts加载器不使用它，并且假定它的输入是原始源代码

在Chrome中调试时，这并不太糟糕，但在编译失败且显示错误行号时，情况会很糟糕。我甚至不知道第二个问题是否可以用源地图解决

我已经尝试过颠倒ts加载器和POSTSS加载器的顺序，但是POSTSS jsx在转换成纯JavaScript后显然不起作用

有人知道如何解决这个问题吗

import * as React from "react";
import styled from "styled-components";

export const GridTest = styled(() => <div />)`
& {
   display: -ms-grid; // this line should not be here
   display: grid;   
}
`;