Блог

Вот моя конфигурация накопительного пакета

 // 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;
  },
};
 

Поэтому, если я импортирую css-файл локально из относительного пути, он вводится, но я импортирую из node_modules, это не так

 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';
 

Что я здесь делаю не так?

Я столкнулся с точно такой же проблемой и, кажется, нашел решение. Хитрость здесь заключается в использовании rollup-plugin-postcss (или также rollup-plugin-styles ) в сочетании с @rollup/plugin-node-resolve .

Моя rollup.config.js внешность выглядит примерно так:

 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']
    })
  ]
};
 

Насколько я могу судить, для моего простого случая не имеет значения, используете ли вы плагины postcss или стили. И то, и другое работает одинаково.