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