Rollup：将“import index.css”注入index.ts文件

Question

我有一个项目，我想从中创建一个 NPM 包。 我的堆栈是：React、Typescript、less 和 AntD。 当我使用 rollup.js 创建捆绑包时，一切正常，但是导入 CSS 并未注入到我要导出的 index.ts 的顶部。我能够在另一个项目中使用 CSS 代码的唯一方法是显式导入 CSS 文件（导入“mypackage/dist/index.css”）。 我正在寻找一种配置 rollup 的方法，以将

import "./index.css"

行注入到主 index.ts 文件的开头。我尝试了很多css/less的插件，但没有成功。 这是我当前的 rollup.config.js：

import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";

import pkg from "./package.json";

export default {
  input: "src/index.tsx",
  output: [
    {
      file: pkg.main,
      format: "esm",
      exports: 'named',
      sourcemap: true,
      strict: false,
    },
  ],
  plugins: [
    postcss({
      extensions: ['.less', '.css'],
      minimize: true,
      modules: true,
      use: {
        sass: null,
        stylus: null,
        less: { javascriptEnabled: true },
      },
      extract: true,
    }),
    typescript({
      objectHashIgnoreUnknownHack: true,
      sourceMap: true,
      inlineSources: true,
    }),
  ],
  external: ["react", "react-dom"],
};

Answer 1

只需删除提取关键字：

postcss({
  extensions: ['.less', '.css'],
  minimize: true,
  modules: true,
  use: {
    sass: null,
    stylus: null,
    less: { javascriptEnabled: true },
  },
}),