Question

我使用webpack使用以TypeScript编写的样式化组件来构建React应用程序。我还将PostCSS与自动前缀一起使用，以在较旧的浏览器上支持CSS网格。编译有效，但生成的源映射不正确。如果我在Chrome中查看它们，则“原始源”将显示PostCSS的输出，而不是原始的tsx源。这是我的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的顺序，但是在转换为纯JavaScript之后，postcss-jsx显然不起作用。

有人知道如何解决此问题吗？

通过Webpack使用TypeScript，样式化组件和PostCSS

0 个答案: