Currently, I am working on a monorepo project where the main project relies on another project called components. When running the entire monorepo, the main project utilizes webpack.dev while the components project simply uses the TypeScript compiler. It looks something like this:
(main): yarn start: webpack-dev-server ...
(components): yarn start: tsc -b
Dealing solely with TypeScript code poses no issues for me. However, when it involves non-TS files such as CSS, I encounter a webpack module missing error.
Even after configuring css-loader and style-loader in my webpack setup for the main project, the issue persists. It appears that TypeScript is not compiling the CSS file correctly.
In my components project, I have something like this:
import "./index.css"
export const Button = () => {
...
}
Subsequently, I receive an error from the main project:
Module not found: Error: Can't resolve './index.css' in '{...}/frontend/design-components/build'
This is the relevant part of my webpack config in the main project:
module: {
rules: [
...,
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
However, I suspect that the real issue lies in how the components project handles the build process since it only leverages TypeScript without using rollup or webpack.