Reputation: 162
I use scss module definition for a react library. ex: Donut.module.scss
@use '@carbon/themes';
@use '@carbon/type';
.donut {
overflow: hidden;
:global {...}
Donut.tsx
import styles from './Donut.module.scss';
const Donut: React.FC<IWidgetProps> = ...
return <div className={styles.donut} ...
My rollup.config is:
import commonjs from "@rollup/plugin-commonjs";
import resolve from '@rollup/plugin-node-resolve';
import del from 'rollup-plugin-delete';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import sass from 'rollup-plugin-sass';
import mdx from '@mdx-js/rollup';
import image from '@rollup/plugin-image';
import json from '@rollup/plugin-json';
import typescript from 'rollup-plugin-typescript2';
export default {
preserveModules: true,
makeAbsoluteExternalsRelative: true, //necessary for rollup-plugin-rebase to work properly
plugins: [
peerDepsExternal(),
del({ targets: 'dist/*' }),
resolve({
browser: true,
preferBuiltins: false,
}
),
commonjs(),
image(),
json(),
mdx(),
typescript({
tsconfig: "./tsconfig.json",
useTsconfigDeclarationDir: true // Output will be located at 'dist/types'
}),
sass(
{
include: ['**/*.css', '**/*.sass', '**/*.scss'],
output: 'dist/styles.css', // Output CSS to a file
options: {
includePaths: ['../../node_modules', 'src/']
}
}),
]
}
This will create a style.css in the dist, but the CSS is not present in the typescript definition. Donut.d.ts
import React from 'react';
import { IWidgetProps } from '../../../types';
import '@carbon/charts/styles.css';
declare const Donut: React.FC<IWidgetProps>;
export default Donut;
So when I try to import this component from the library in a React app, the style is not resolved.
<div className={styles.donut}> --> <div className="">
What am I missing in the configuration or is the CSS module not supported?
Upvotes: 0
Views: 45