Cant resolve error when using CSS composes with an external monorepo package

Question

I have a React app, in a mono-repo. I have created a utility package for reusable CSS (@monorepo/theme), and from my react app I would like to compose a css rule from the theme package. An example of what I'm trying to do is found below:

packages/fe/my-app/src/App.module.css:

.red {
  composes: red from '@monorepo/theme/src/css/color'
}

packages/utils/theme/src/css/colors.css:

.red {
  color: red;
}

This isn't not working at the moment and I am getting this error:

./src/App.module.css (.../monorepo/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-4-1!/...monorepo/node_modules/postcss-loader/src??postcss!./src/App.module.css)
Module not found: Can't resolve './@monorepo/theme/src/css/colors.css' in '.../monorepo/my-app/packages/fe/my-app/src'

My configs...

lerna.json:

{
  "packages": [
    "packages/fe/*",
    "packages/utils/*"
  ],
  "version": "independent",
  "npmClient": "yarn",
  "useWorkspaces": true
}

package.json:

{ "name": "monorepo", "private": true, "devDependencies": { "lerna": "^3.22.1" }, "workspaces": [ "packages/fe/", "packages/utils/" ] }

packages/fe/my-app/package.json:

{
  "name": "@monorepo/my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@monorepo/theme": "1.0.0",
    "@monorepo/components": "1.0.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

packages/utils/theme/package.json:

{
  "name": "@monorepo/theme",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "start": "yarn compile:watch",
    "compile": "tsc",
    "compile:watch": "tsc -d --watch"
  },
  "dependencies": {
    "@monorepo/theme": "1.0.0",
    "typescript": "~3.7.2"
  }
}

tsconfig.base.json:

{
  "compilerOptions": {
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "exclude": ["node_modules"]
}

packages/fe/my-app/tsconfig.json:

{
  "extends": "../../../tsconfig.base.json",
  "compilerOptions": {
    "target": "es5",
    "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": true,
    "jsx": "react",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  },
  "include": [
    "src"
  ]
}

packages/utils/theme/tsconfig.json:

{
  "extends": "../../../tsconfig.base.json",
  "compilerOptions": {
    "module": "commonjs"
  }
}