CSS不加载汇总捆绑

Question

因此，经过无数小时的调查，我将问题指定为我项目中的汇总配置。 问题在于，由于某种原因，一旦我将捆绑包导入另一个项目，CSS样式就不会应用于我的组件。

我有什么：

AReact +打字稿设置

bundling的卷
• 一个单独的项目，我要消耗生成的捆绑包
这里是我的汇总配置：

import typescript from 'rollup-plugin-typescript2';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import css from 'rollup-plugin-import-css';

const extensions = ['.js', '.jsx', '.ts', '.tsx'];

export default [
  {
    input: 'src/index.tsx',
    output: {
      file: 'dist/bundle.js',
      format: 'iife',
      name: 'MyApp',
      sourcemap: true,
    },
    plugins: [
      resolve({ extensions }),
      commonjs(),
      css(),
      typescript({
        tsconfig: 'tsconfig.json',
      }),
    ],
  },
  {
    input: 'src/index.tsx',
    output: [
      {
        file: 'dist/cjs/index.js',
        format: 'cjs',
        sourcemap: true,
      },
      {
        file: 'dist/esm/index.js',
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      resolve({ extensions }),
      commonjs(),
      css(),
      typescript({
        tsconfig: 'tsconfig.json',
      }),
    ],
  },
];

然后我的React组件会导入CSS文件，例如：

import React from 'react'
import './styles.css'

export default function MyComponent() {
  return <div className="myClass">Hello World</div>
}

东西是可以很好地构建的，但是当我将捆绑包在另一个项目中时，样式并未应用于我的组件。 我确实在输出中看到了一个文件，但似乎不会自动加载。

我尝试了什么：

我还试图以这样的方式调用CSS插件：

bundle.js

以相同的结果。

stackblitz示例

我在Stackblitz上设置了一个最小的工作示例运行它：

.css

css({ output: 'styles.css' }),

npm install

如何正确配置汇总，以便在包括另一个项目的捆绑包时包括我的CSS？
1. 任何反馈都将不胜感激！
2. 我通过用

   npm run build

   完全替换CSS插件来解决了我的问题。 然后是这样的问题：
npm run dev
3. ：

   ：

rollup-plugin-postcss

通过阅读github

读，在我的具体情况下，我需要使用

rollup.config

CSS在运行时自动注入到

Answer 1

中

full配置文件：

inject