1

我有一个 React 应用程序，在一个单一的仓库中。我已经为可重用的 CSS (@monorepo/theme) 创建了一个实用程序包，并且我想从我的 react 应用程序中从主题包中编写一个 css 规则。下面是我正在尝试做的一个示例：

包/fe/my-app/src/App.module.css：

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

包/实用程序/主题/src/css/colors.css：

.red {
  color: red;
}

这目前不起作用，我收到此错误：

./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'

我的配置...

lerna.json：

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

包.json：

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

包/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"
    ]
  }
}

包/实用程序/主题/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"]
}

包/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"
  ]
}

包/实用程序/主题/tsconfig.json：

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

0 回答 0