Я пытаюсь создать библиотеку веб-интерфейса (компоненты React и css / scss).
Что я ищу:
- Создание одного файла commonjs
.js
и .css
файла. - НЕ включаетбиблиотеки (например, реагировать и т. д.) в выводе
.js
- Позвольте мне использовать модули CSS
Мой код выглядит следующим образом:
MyComponent.tsx
import { myComponentStyle } from './MyComponent.scss'
export class MyComponent extends React.Component {
render() {
return <div className={myComponentStyle} />
}
}
MyComponent.scss
.myComponentStyle { /* styles */ }
MyComponent.scss.d.ts (Сгенерировано typed-css-modules
для радости компилятора ts)
export const myComponentStyle: string;
И у меня есть один файл index.ts, который экспортирует эти файлы:
index.ts
export { MyComponent } from './MyComponent.tsx'
// other components
Если у меня нет стилей, то подобная конфигурация свертки строит именно так, как я хочу:
import commonjs from 'rollup-plugin-commonjs'
import typescript from 'rollup-plugin-typescript2'
const pkg = require('./package.json')
export default {
input: 'src/index.ts',
output: [{ file: pkg.main, format: 'cjs', sourcemap: true }],
external: [],
plugins: [
typescript({ useTsconfigDeclarationDir: true }),
commonjs(),
],
}
Но я не могу понять, как с этим справитьсяCSSЯ пробовал rollup-plugin-postcss
и rollup-plugin-postcss-modules
, но ни один из них даже не компилируется.
Мой вопрос:
- Есть ли способ (пример) о том, какустановить это с помощью свертки?
- Если нет альтернативы для получения желаемых одиночных
.js
и .css
выходов (веб-пакет, какая бы то ни было система сборки)?