rollup-plugin-postcss不同sourceMap配置生成Sourcemap不一致问题

问题根源 #

• 当sourceMap: true生成外部sourcemap时，rollup-plugin-postcss默认没有完整保留Sass编译阶段的sourcemap链，导致最终的sourcemap只指向已编译的style.scss，而非原始的局部文件。
• sourcesContent是PostCSS默认添加的，会把编译后的CSS内容嵌入sourcemap，导致体积膨胀。

解决方案 #

修改你的rollup.config.js配置，调整PostCSS和Sass的sourcemap相关设置：

plugins: [
  postcss({
    extract: true,
    // 配置sourceMap为对象，关闭sourcesContent并指定生成外部map
    sourceMap: {
      inline: false,
      includeContent: false
    },
    minimize: {
      preset: [
        'default',
        { discardComments: false }
      ]
    },
    plugins: [
      autoprefixer(),
    ],
    // 配置Sass生成原始文件的sourcemap，让PostCSS能继承完整映射链
    use: {
      sass: {
        sourceMap: true,
        // 若局部文件路径解析有问题，可添加includePaths指定查找目录
        // includePaths: ['./src/partials']
      }
    }
  })
]

配置说明 #

1. 开启Sass sourcemap：通过use.sass.sourceMap: true让dart-sass生成对应原始局部文件的sourcemap，PostCSS就能拿到完整的映射链，最终外部sourcemap会正确指向_part1.scss、_part2.scss等源文件。
2. 移除sourcesContent：将sourceMap设为对象并配置includeContent: false，PostCSS就不会把编译后的CSS内容嵌入sourcemap，大幅降低文件体积。
3. 生成外部sourcemap：inline: false确保生成独立的.css.map文件，而非内联到CSS中。

验证效果 #

修改配置后重新编译，生成的sourcemap文件中sources字段会显示你原始的局部SCSS文件路径，且不再包含sourcesContent字段，外部sourcemap就能正确关联到对应的局部文件了。

内容的提问来源于stack exchange，提问作者norixxx