CODEWITHSUNDEEP
cssreactjsrollup
Nemus
Nemus

Reputation: 1482

Rollup loading css via scss() plugin gives path error

I'm trying to pack a react component library using rollup. I downloaded rollup-plugin-scss and put it in my rollup.config:

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      json(),
      scss(),
    ],
    external: ['react-dom', 'axios', 'react-redux', 'react', '@reduxjs/toolkit', 'react-audio-player']
  },
  {
    input: "dist/esm/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts(), livereload()]
  },
];

taken from here dev.to

When I launch my build, I get this error:

[!] Error: Could not resolve './PlayerEmbed.style.css' from dist/esm/components/player-ui/PlayerUI.d.ts Error: Could not resolve './PlayerEmbed.style.css' from dist/esm/components/player-ui/PlayerUI.d.ts

Which is caused by the second option block, and is pretty obvious as in my dist/esm/components/player-ui/PlayerUI.d.ts I got this:

import './PlayerEmbed.style.css';
export default function PlayerUI(p: {
    actions: any;
    endpoint: string;
}): JSX.Element;

But all the css has been moved by rollup to dist/index.css. Basically, the problem is that rollup didn't update the css path. How can I solve this?

Hint: I got this very same error with postcss plugin too.

Upvotes: 0

Views: 1379

Answers (1)

Danis
Danis

Reputation: 21

You can try add external in your options. It helped me in the same problem.

 {
    input: "dist/esm/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts(), livereload()],
    external: [/\.css$/],
  },

Upvotes: 1

Related Questions