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.