I'm currently working on a TypeScript (TS), React project where I have organized all my React components. To make things easier, I decided to create an NPM package out of this project and use it in various separate React projects. However, I've encountered an issue when trying to export the styling along with the TypeScript components.
When using components from the NPM package, I'm getting errors such as:
Module not found: Can't resolve '../css/footer.css'After creating the packaging directory (dist) using tsc, all my components are present but the CSS files are missing. Both my components and CSS are located within the same src folder.
Below is a snippet of my tsconfig.json file:
{
"compilerOptions": {
"outDir": "dist",
"target": "esnext",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"jsx": "react"
},
"include": [
"src"
]
}
Should I consider moving the styling from CSS files to TypeScript files that utilize the <style jsx> tag, or is there a different approach to ensure that the NPM package includes both styling and components seamlessly?