Проблема в том, что по какой -то причине стили CSS не применяются к моим компонентам, как только я импортирую свой пакет в другой проект. < /p>
Что у меня есть: < /h3>
[*] a React + Setup < /li>
< li> Rollup for Bundling < /li>
Отдельный проект, в котором я потребляю сгенерированный пакет < /li>
< /ul>
Вот мой конфигурация Rollup : < /p>
Код: Выделить всё
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',
}),
],
},
];
< /code>
, а затем мои компоненты React импортируют файлы CSS, такие как SO: < /p>
import React from 'react'
import './styles.css'
export default function MyComponent() {
return Hello World
}
< /code>
Эта вещь: bundle.js < /code> становится все хорошо, но когда я включаю пакет в другой проект, стили не применяются к моим компонентам.
Я делаю См. Файл .css У меня есть минимальный рабочий пример на Stackblitz здесь < /p>
, чтобы запустить его: < /p>
Код: Выделить всё
npm installКод: Выделить всё
npm run buildКод: Выделить всё
npm run dev
Любая обратная связь была бы очень оценена!
Подробнее здесь: https://stackoverflow.com/questions/793 ... lup-bundle
Мобильная версия