1

I'm currently trying to do a react component library with react and rollup. It's working pretty fine, i can import scss or css files my reacts components. But when I try to import in my index.css file externals files they are still imported when I build with rollup, but there is no associated files to this import in the dist folder.

this is my rollup.config.js file

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import postcss from "rollup-plugin-postcss";
import { terser } from "rollup-plugin-terser";
import peerDepsExternal from "rollup-plugin-peer-deps-external";

const packageJson = require("./package.json");

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },  
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      typescript({
        tsconfig: "./tsconfig.json",
        exclude: ["**/src/stories/**", "**/*.stories.tsx"],
      }),
      postcss({
        extract: true
      }),
      terser(),
    ],
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
    external: [/\.css$/, /\.scss$/],
  },
];

my index.ts

import "./index.css"
export * from "./components"

my index.css

@import './toto.css'

toto.css

.toto {
    color: aquamarine;
}

enter image description here as you can see the toto.css file is imported but nowhere in the folder generated i can find the file or its css properties.

Thank's

0

1 Answer 1

1

ok, i found out where was the problem, i just forgot to add 'postcss-import': {} in my postcss config.jsfile

It solves the issue.

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.