Impossible to inject CSS from a node_modules import

[gablabelle]

trafficstars

So here is my rollup config

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

module.exports = {
  rollup(config, _options) {
    config.plugins.push(
      postcss({
        plugins: [
          autoprefixer(),
          tailwindcss(),
          cssnano({
            preset: 'default',
          }),
        ],
        extensions: ['.css'],
        modules: {
          scopeBehaviour: 'global',
          globalModulePaths: [
            /react-toastify/,
          ],
        },
        inject: true,
        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?

[wangJacker]

same issue,did you solve it

[gablabelle]

same issue,did you solve it

Nope.

[mjangir]

@gablabelle Hope you have found a solution for that. Is it fixed?

[gablabelle]

@gablabelle Hope you have found a solution for that. Is it fixed?

Nope, we moved away from rollup in our monorepo for various reasons.

[CodeguruEdison]

I solved this issue by using peerDepsExternal({ includeDependencies: true }), but I am having issues with local css file.It is not injecting

[2heal1]

I find the sideEffects of [email protected] is :

  "sideEffects": [
    "*.css"
  ]

And ths css file is react-toastify/dist/ReactToastify.css ,so it will be tree-shaking.

[antmihlin]

In my case the issue with the @import was solved by removing the extension.

Instead of: @import 'react-toastify/dist/ReactToastify.css'

Use this: @import 'react-toastify/dist/ReactToastify'