2

Here is my rollup config

// rollup.config.js
const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');

module.exports = {
  rollup(config, _options) {
    config.plugins.push(
      postcss({
        plugins: [
          autoprefixer(),
        ],
        extensions: ['.css'],
        modules: false,
        extract: false,
      }),
    );
    return config;
  },
};

So if I import css file local from a relative path, it gets injected but I import from node_modules it doesn't

import React from 'react';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
// The following works if I copy the file locally
// import './ReactToastify.css';

What am I doing wrong here?

Manish Jangir
  • 5,329
  • 4
  • 42
  • 75

1 Answers1

1

I came across exactly the same problem and I think I found the solution. The trick here is to use rollup-plugin-postcss (or also rollup-plugin-styles) in combination with @rollup/plugin-node-resolve.

My rollup.config.js looks something like this:

import { nodeResolve } from '@rollup/plugin-node-resolve'
import postcss from 'rollup-plugin-postcss'
// import styles from 'rollup-plugin-styles'

export default {
  ...
  plugins: [
    postcss(),
    // styles(),
    nodeResolve({
      extensions: ['.css']
    })
  ]
};

As far as I can tell, for my simple case, it doesn't matter if you use postcss or styles plugins. Both work the same.

samuelg0rd0n
  • 1,080
  • 2
  • 15
  • 27
  • 1
    Sorry for late posting. I had a different issue and it was because of a sideEffect property present in package.json of the requested node module. May be that has been done for webpack 5 treeshaking but we don't have any control over that. So I just copied that css into my source code. – Manish Jangir Aug 17 '21 at 17:23
  • I also have the problem that imports from node_modules do not get injected. What sideEffect property was that which caused the problem? For me it happens with all CSS from all node modules – shadow May 10 '22 at 21:51
  • you are a star @samuelg0rd0n - thank you! – selected Jul 13 '23 at 10:50