Generate single css file for multiple js bundles(esm, umd, cjs)

[cpmotion]

Current rollup.config.js looks as such:

import postcss from 'rollup-plugin-postcss';
import replace from 'rollup-plugin-replace';
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import mqpacker from 'css-mqpacker';
import pkg from './package.json';

const isProd = process.env.NODE_ENV !== 'production';

export default {
  input: './src/index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    },
    {
      file: pkg.module,
      format: 'esm'
    },
    {
      file: pkg.browser,
      format: 'umd',
      name: pkg.name
    }
  ],
  external: Object.keys(pkg.dependencies),
  watch: {
    include: './src/**',
    chokidar: {
      ignoreInitial: true,
      awaitWriteFinish: {
        stabilityThreshold: 100,
        pollInterval: 10
      }
    }
  },
  interop: false,
  plugins: [
    postcss({
      extract: true,
      sourceMap: true,
      plugins: [mqpacker()]
    }),
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    resolve(),
    babel({
      exclude: 'node_modules/**'
    }),
    commonjs(),
    isProd && terser()
  ]
};

Works fine but I get separate css and css.map files for each module type. I just want the JS files and a single css/css.map file. Possible??

[lahickey]

Set your extract parameter to a filename relative to the rollup.config.js file and it should export a single file. E.g.

postcss({
      extract: 'dist/pkg.css',
      sourceMap: true,
      plugins: [mqpacker()]
    }),

[zhangwei900808]

import React, { Component } from "react";
import { Button } from "antd";
**import "styles/demo.pcss";**

class Demo extends Component {
  render() {
    return (
      <div className="demo-container">
        <div className="demo-wrapper">this is my demo wrapper</div>
        <Button type="primary">this is demo component</Button>
      </div>
    );
  }
}

export default Demo;

the path is wrong , I missed something?

[designbyadrian]

Set your extract parameter to a filename relative to the rollup.config.js file and it should export a single file. E.g.

No, this will create a folder named "dist" for every bundle.

[andriirak]

any updates?