I am currently in the process of creating a frontend library consisting of React components and CSS/SCSS.
Specifically, I am looking for:
- To build a single CommonJS
.jsfile and.cssfile. - To exclude external libraries (e.g. React) from the
.jsoutput. - The ability to utilize (s)css modules.
My code structure resembles the following:
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 (Created by typed-css-modules to satisfy the TypeScript compiler)
export const myComponentStyle: string;
I have an index.ts file that exports these components:
index.ts
export { MyComponent } from './MyComponent.tsx'
// other components
If I do not include styles, a rollup configuration like the one below builds everything as intended:
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(),
],
}
However, I am having difficulties with handling CSS. I attempted using both rollup-plugin-postcss and rollup-plugin-postcss-modules, but neither of them worked.
Therefore, my query is:
- Is there a method (perhaps an example) on how to configure this setup with Rollup?
- If not, are there any alternative approaches to generate the desired single
.jsand.cssoutputs (via webpack or any other build system)?