reactjs - 汇总插件 postcss 不注入从 node_modules 导入的 css

Question

这是我的汇总配置

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

我在这里做错了什么？

Answer 1

我遇到了完全相同的问题，我想我找到了解决方案。这里的诀窍是使用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 或样式插件并不重要。两者的工作方式相同。