reactjs - 在 webpack 中使用 TypeScript、styled-components 和 PostCSS

Question

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

module.exports = {
   mode: "development",
   entry: {
      "GridTest.js": "./Source/View/GridTest.tsx",
   },
   output: {
      filename: "../../bmdnet/js/packed/[name]"
   },
   devtool: "source-map",
   module: {
      rules: [
         {
            test: /\.tsx?$/,
            use: [
               {
                  loader: "ts-loader",
               },
               {
                  loader: "postcss-loader",
                  options: {
                     plugins: () => ([
                        require("autoprefixer")({ grid: true }),
                        require("postcss-fail-on-warn"),
                     ]),
                     syntax: "postcss-jsx",
                     sourceMap: true,
                  },
               },
            ],
         },
      ]
   },
};

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

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

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

这是 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;   
}
`;

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

在 Chrome 中调试时这并不算太糟糕，但当编译失败并显示错误的行号时会很糟糕。我什至不知道第二个问题是否可以使用源映射解决。

我已经尝试过颠倒 ts-loader 和 postcss-loader 的顺序，但 postcss-jsx 在转换为纯 JavaScript 后显然不起作用。

有谁知道如何解决这个问题？

标签： reactjstypescriptwebpackstyled-componentspostcss