How to package TypeScript React components with SASS for NPM

Viewed 83

I'm trying to package React components written in TypeScript which imports SASS and SVG files. Without those SASS and SVG files, the packaging seems to be very straightforward. But with them tsc compiler gives an error. So here's what I'm doing:

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "declaration": true,
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "noImplicitAny": false,
    "jsx": "react",
    "sourceMap": true,
    "outDir": ""
  },
  "include": ["src/components"]
}

One example component under src/components folder:

import React from 'react';
import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
import styles from './Alert.module.scss';

function Alert(props: AlertProps) {
  const alertProps = {
    classes: {
      standardSuccess: styles['success'],
      standardWarning: styles['warning'],
      standardError: styles['error'],
      standardInfo: styles['info'],
      icon: styles['icon'],
    },
    ...props,
  };

  return <MuiAlert {...alertProps}>{props.children}</MuiAlert>;
}

export default Alert;

I run this:

tsc --project tsconfig.json

And I get an error even though the file exists

Cannot find module './Alert.module.scss'.

I understand that the problem is that TypeScript compiler cannot handle other that TS files, but how can I compile TS files which import SASS and SVG files? I tried to find a solution to this but couldn't find anything from typescript docs or anywhere.

I'm pretty sure that there are easy solution to this but couldn't figure it out. Thanks for the help in advance.

0 Answers
Related