1

I have a project that I want to create an NPM package from it. My stack is: React, Typescript, less, and AntD. When I'm creating a bundle with rollup.js, everything workes fine, but, the import CSS isn't injected to the top of the index.ts that I'm exporting. the only way I was able to have the CSS code in another project is by explicitly importing the CSS file (import "mypackage/dist/index.css"). I'm searching for a way to config rollup to inject the line import "./index.css" to the beginning of the main index.ts file. I have tried a lot of plugins of css/less, with no success. Here is my current 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"],
};

1 Answer 1

0

Just remove extract keyword:

postcss({
  extensions: ['.less', '.css'],
  minimize: true,
  modules: true,
  use: {
    sass: null,
    stylus: null,
    less: { javascriptEnabled: true },
  },
}),
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.