如何在Rollup构建中阻止CSS导入被写入d.ts文件？

我用React + TypeScript + Tailwind + PostCSS + Rollup搭建了组件库，目前所有功能正常，但输出的dist/index.d.ts文件中自动包含了../styles/index.css的导入语句。实际这个CSS文件不会被包含在最终库中（我们用的是经过压缩清理的Tailwind CSS文件），现在只能靠sed命令在构建后删除该导入，想找到构建过程中直接阻止它生成的方案。

当前的rollup.config.js配置如下：

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import del from "rollup-plugin-delete";
import simplevars from "postcss-simple-vars";
import nested from "postcss-nested";
import cssnext from "postcss-cssnext";
import cssnano from "cssnano";

/**
 * @type {import('rollup').RollupOptions}
 */
export default {
  input: "lib/index.tsx",
  output: [
    {
      file: "dist/index.tsx",
      format: "es",
      sourcemap: false,
    },
  ],
  plugins: [
    del({ targets: "dist/*" }),
    peerDepsExternal(),
    postcss({
      config: {
        path: "./postcss.config.js",
      },
      plugins: [
        simplevars(),
        nested(),
        cssnext({ warnForDuplicates: false }),
        cssnano(),
      ],
      extensions: [".css"],
      minimize: true,
      modules: false,
      extract: "index.css",
    }),
    resolve(),
    typescript({
      useTsconfigDeclarationDir: true,
    }),
  ],
};

解决方案1：用rollup-plugin-dts单独处理声明文件 #

这个方案能精准控制声明文件输出，彻底过滤非TS导入，是最可靠的方式。

1. 安装依赖：

npm install rollup-plugin-dts --save-dev

2. 修改rollup.config.js，拆分两个构建任务：一个编译JS/CSS，一个单独生成纯净的d.ts文件

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import del from "rollup-plugin-delete";
import simplevars from "postcss-simple-vars";
import nested from "postcss-nested";
import cssnext from "postcss-cssnext";
import cssnano from "cssnano";
import dts from "rollup-plugin-dts"; // 新增导入

/**
 * @type {import('rollup').RollupOptions[]}
 */
export default [
  // 任务1：编译JS并处理CSS
  {
    input: "lib/index.tsx",
    output: [
      {
        file: "dist/index.tsx",
        format: "es",
        sourcemap: false,
      },
    ],
    plugins: [
      del({ targets: "dist/*" }),
      peerDepsExternal(),
      postcss({
        config: { path: "./postcss.config.js" },
        plugins: [simplevars(), nested(), cssnext({ warnForDuplicates: false }), cssnano()],
        extensions: [".css"],
        minimize: true,
        modules: false,
        extract: "index.css",
      }),
      resolve(),
      typescript({
        useTsconfigDeclarationDir: false,
        tsconfigOverride: {
          declaration: true,
          declarationDir: "./.temp", // 临时目录存中间声明文件
        },
      }),
    ],
  },
  // 任务2：生成最终纯净的d.ts文件
  {
    input: "./.temp/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "es" }],
    plugins: [dts()],
    external: [/\.css$/], // 排除所有CSS导入
  },
];

3. 在tsconfig.json中添加排除规则：

{
  "exclude": [".temp", "dist"]
}

解决方案2：通过TypeScript配置忽略CSS导入 #

如果不想新增插件，可通过调整TypeScript配置实现：

1. 在项目根目录创建globals.d.ts，添加CSS模块的类型声明（避免组件中CSS导入报错）：

declare module "*.css" {
  const styles: Record<string, string>;
  export default styles;
}

2. 修改rollup-plugin-typescript2的配置，让TypeScript生成声明文件时忽略CSS文件：

typescript({
  useTsconfigDeclarationDir: true,
  tsconfigOverride: {
    exclude: ["**/*.css"],
    compilerOptions: {
      declaration: true
    }
  },
})

验证 #

执行构建后检查dist/index.d.ts，确认已移除../styles/index.css的导入语句，同时组件的类型声明完整保留。

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