CODEWITHSUNDEEP
cssreactjstypescriptrollup
sori
sori

Reputation: 536

CSS not loading in Rollup bundle

So after countless hours of investigation, I pinpointed the issue to be my Rollup config in my project. The problem is that for some reason the CSS styles are not being applied to my components once I import my bundle into another project.

What I Have:

Here’s my Rollup config:

import typescript from 'rollup-plugin-typescript2';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import css from 'rollup-plugin-import-css';

const extensions = ['.js', '.jsx', '.ts', '.tsx'];

export default [
  {
    input: 'src/index.tsx',
    output: {
      file: 'dist/bundle.js',
      format: 'iife',
      name: 'MyApp',
      sourcemap: true,
    },
    plugins: [
      resolve({ extensions }),
      commonjs(),
      css(),
      typescript({
        tsconfig: 'tsconfig.json',
      }),
    ],
  },
  {
    input: 'src/index.tsx',
    output: [
      {
        file: 'dist/cjs/index.js',
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: 'dist/esm/index.js',
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      resolve({ extensions }),
      commonjs(),
      css(),
      typescript({
        tsconfig: 'tsconfig.json',
      }),
    ],
  },
];

and then my React components import CSS files like so:

import React from 'react'
import './styles.css'

export default function MyComponent() {
  return <div className="myClass">Hello World</div>
}

The thing is bundle.js gets built just fine but when I include the bundle in another project the styles are not being applied to my components. I do see a .css file in the output, but it doesn't seem to get loaded automatically.

What I tried:

I also tried to call the CSS plugin like this: css({ output: 'styles.css' }), with the same result.

StackBlitz example

I have setup a minimal working example on StackBlitz here

To run it:

  1. npm install
  2. npm run build
  3. npm run dev

How can I properly configure Rollup so that my CSS is included when including the bundle from another project?

Any feedback would be greatly appreciated!

Upvotes: 3

Views: 182

Answers (1)

sori
sori

Reputation: 536

I have managed to solve my issue by replacing the CSS plugin altogether with rollup-plugin-postcss. Then it was a matter of calling the plugin like this in the rollup.config:

postcss({
  inject: true,  
  minimize: true,
  sourceMap: true,
})

By reading the GitHub README, in my specific case I needed to use inject so that the CSS is injected automatically at runtime into <head>

Full config file:

import postcss from 'rollup-plugin-postcss'
import typescript from 'rollup-plugin-typescript2'
import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'

const extensions = ['.js', '.jsx', '.ts', '.tsx']

export default [
  {
    input: 'src/index.tsx',
    output: {
      file: 'dist/bundle.js',
      format: 'iife',
      name: 'MyApp',
      sourcemap: true
    },
    plugins: [
      resolve({ extensions }),
      commonjs(),
      postcss({
        inject: true,
        minimize: true,
        sourceMap: true
      }),
      typescript({
        tsconfig: 'tsconfig.json'
      }),
    ]
  },
  {
    input: 'src/index.tsx',
    output: [
      {
        file: 'dist/cjs/index.js',
        format: 'cjs',
        sourcemap: true
      },
      {
        file: 'dist/esm/index.js',
        format: 'esm',
        sourcemap: true
      }
    ],
    plugins: [
      resolve({ extensions }),
      commonjs(),
      postcss({
        inject: true,
        minimize: true,
        sourceMap: true
      }),
      typescript({
        tsconfig: 'tsconfig.json'
      })
    ]
  }
]

Upvotes: 0

Related Questions