How to include css in bundle w/ rollup.js Unable to load css files - Unexpected token

Question

I am currently running into an error trying to bundle/load a CSS file in a component library using roll up.js. I keep running into an unexpected token error which is leading me to believe it's not recognizing the extension. I have tried including CSS files in the babel plugin, that didn't work. Adding the postcss pluging resulted in my getting this error rather than my previous error Can not resolve DropDown.css but now I'm stuck. Any ideas?

The error:

[!] (babel plugin) SyntaxError: /Users/adam.mateo/Documents/code/quovo-app/shared-components/components/DropDown/DropDown.css: Unexpected token (1:0)
components/DropDown/DropDown.css (1:0)
SyntaxError: /Users/adam.mateo/Documents/code/quovo-app/shared-components/components/DropDown/DropDown.css: Unexpected token (1:0)
> 1 | .Dropdown-root {
    | ^
  2 |   position: relative;
  3 | }
  4 | 

My rollup.config:

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'components/index.js',
  output: {
    file: 'dist/main.js',
    format: 'cjs',
  },
  plugins: [
    babel({
      babelrc: false,
      exclude: 'node_modules/**',
      plugins: [
        'transform-object-rest-spread',
        // 'external-helpers',
      ],
      presets: [
        'react',
        ['env', { 'modules': false }],
      ],
    }),
    postcss({
       extensions: ['.css'],
    }),
    commonjs(),
  ]
}

Answer 1

I'm using a separate plugin for this: rollup-plugin-scss. It captures all spare .css files imported in the components, and aggregates into a single CSS bundle that comes as part of a rollup output package.

A very simple configuration that suits my needs, looks like this:

import scss from 'rollup-plugin-scss'
...

export default {
  input: 'src/index.tsx',
  output: [...],
  plugins: [
    ...
    scss(),
  ]
}

There seems to be more options to enhance it, if needed.