PostCSS 构建错误解决指南：处理无效的映射信息

PostCSS 构建错误：原始映射行号和列号不是数字

如果你在使用 npm 构建项目时遇到了 PostCSS 构建错误，错误信息可能是："error during build:
Error: [postcss] original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values."。

不要惊慌！这个错误并不难解决。让我带你一步步解决它。

错误原因

这个错误表明，PostCSS 在尝试将原始源代码映射到生成后的 CSS 时遇到了问题。具体来说，原始映射中的行号和列号不是数字，这可能是由于源代码中存在无效的映射信息所致。

解决方案

解决此错误的步骤如下：

1. 检查原始映射文件： 查看 PostCSS 生成的映射文件，例如 sourcemap.json 或 style.css.map，以查找是否有任何行号或列号为空或无效。
2. 检查源代码： 检查导入的 CSS 文件是否有任何无效的源映射注释。这些注释通常以 /*# sourceMappingURL= 开头，并且应指向正确的源文件和行号。
3. 删除无效的映射： 如果找到任何无效的映射信息，可以尝试将其从源代码中删除。这可以包括删除无效的源映射注释或从映射文件中删除无效的行。
4. 使用正确的 PostCSS 插件： 确保使用的 PostCSS 插件是正确的，并且已正确配置。例如，postcss-cssnext 插件需要适当配置才能处理源映射。

具体示例

在给定的示例中，错误似乎是由大量 @import 语句引起的，这些语句导入 Material Design 组件库的 CSS 文件。这些文件可能包含无效的源映射信息，导致 PostCSS 无法正确映射生成后的 CSS。

要解决此问题，可以尝试以下方法：

1. 更新 Material Design 组件库： 确保安装的 Material Design 组件库是最新的，并且支持正确的源映射。
2. 检查映射文件： 检查 Material Design 组件库 CSS 文件中生成的映射文件是否存在任何无效的映射信息。
3. 手动映射： 如果无法解决映射文件中的问题，则可以尝试手动将源代码映射到生成后的 CSS。这可以通过使用 postcss-source-map 插件来完成。

其他提示

• 确保使用最新的 PostCSS 版本和插件。
• 使用源映射调试工具，例如 Chrome DevTools，以可视化源代码与生成后 CSS 之间的映射。
• 如果问题仍然存在，请查看 PostCSS 文档或寻求社区支持。

常见问题解答

1. 为什么会出现这个错误？
   这个错误是由源代码中无效的映射信息引起的。
2. 如何修复这个错误？
   可以检查原始映射文件、源代码和 PostCSS 插件配置，并删除无效的映射信息。
3. PostCSS 是什么？
   PostCSS 是一个流行的 CSS 转换工具，用于处理源映射。
4. 什么是源映射？
   源映射是一种将生成后的 CSS 映射到原始源代码的技术。
5. 如何查看映射文件？
   可以使用 Chrome DevTools 或其他调试工具查看映射文件。

希望这些信息对你有帮助。如果你还有任何问题，请随时留言。