how to use rollup with css and module.css in same project

148 views Asked by At

I tried to make a library of my react(typescript) project and i need to use rollup to do it. In my project i use css class and module.css class. I use he css file without module because in a component i need to overwrite the css of a external library (React calendar).

This is what my rollup.config.js looks like:

import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import externals from "rollup-plugin-node-externals";
import commonjs from "@rollup/plugin-commonjs";
import postcss from "rollup-plugin-postcss";
import svgr from "@svgr/rollup";
const packageJson = require("./package.json");
export default [
  {
    input: "src/library.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      postcss(),
      externals(),
      resolve(),
      commonjs(),
      typescript({tsconfig: "./tsconfig.json"}),
      svgr(),
    ],
  },
  {
    input: "dist/esm/library.d.ts",
    output: [{file: "dist/index.d.ts", format: "esm"}],
    plugins: [
      dts(),
      externals({
        exclude: "react react-dom websocket",
      }),
    ],
  },
];

The error I get is for pure css classes, and it is the following

[!] Error: Could not resolve './CustomCalendar.css' from dist/esm/Component/MyComponent/CustomCalendar.d.ts
Error: Could not resolve './CustomCalendar.css' from dist/esm/Component/MyComponent/CustomCalendar.d.ts
    at error (/home/pc/projects/my-project/node_modules/rollup/dist/shared/rollup.js:198:30)
    at ModuleLoader.handleResolveId (/home/pc/projects/my-project/node_modules/rollup/dist/shared/rollup.js:22287:24)
    at /home/pc/projects/my-project/rollup/dist/shared/rollup.js:22250:26
0

There are 0 answers