Cyril
Cyril

Reputation: 162

rollup-plugin-sass doesn't include scss modules

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

Answers (0)

Related Questions