Rollup插件postcss无法注入从node_modules导入的CSS。

Question

这是我的Rollup配置。

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

这里我做错了什么？

- Manish Jangir

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或styles插件都没有关系。两者的效果相同。

- samuelg0rd0n

---

抱歉晚发帖。我遇到了一个不同的问题，是由于请求的节点模块的package.json中存在sideEffect属性导致的。可能这是为了webpack 5的树摇动效果而做的，但我们对此没有任何控制权。所以我只是将那个CSS复制到我的源代码中。 - undefined

我也遇到了一个问题，就是无法注入来自node_modules的导入项。是哪个sideEffect属性引起了这个问题？对我来说，所有来自所有node模块的CSS都会出现这个问题。 - undefined

你是个明星 @samuelg0rd0n - 谢谢！ - undefined

我在postcss和styles两个地方都遇到了错误 :/. 每个地方都显示不同的CSS语法错误。 - undefined