问题标签 [linaria]

我想尝试一下Linaria（使用next-linaria），但我目前坚持让它在我的任何 Next.js 项目（顺便也使用 Typescript）中工作。

万恶之源似乎是 Next.js 默认支持的路径别名。

tsconfig.json

刚安装 Linaria 和 next-linaria 时，出现如下错误：

我已经知道Linaria 声明不支持除@babel-plugin-module-resolver或 webpack 之外的任何其他模块别名。但是，我无法让其中任何一个工作。

我尝试了 @babel-plugin-module-resolver 并将相同的路径配置（和其他一些尝试）放入 .babelrc，但没有成功。

我也尝试对 webpack 别名做同样的事情。

next.config.js

Next.js 的默认项目结构如下所示：

所以，我很想问是否有人可以告诉我们如何在 Next + Linaria 中使用路径别名。

虽然情感对开发人员的体验很有帮助，但它确实会影响应用程序的速度。这篇文章作为一个很好的参考：https ://calendar.perfplanet.com/2019/the-unseen-performance-costs-of-css-in-js-in-react-apps/

在我的公司，我们想评估这种性能影响的重要性，以及是否值得优化。

我该如何分析这个？我可以启动一个新应用程序并比较两个基本示例，如下所示：https ://pustelto.com/blog/css-vs-css-in-js-perf/但这只是理论上的，我想看看如何它会影响我们的应用程序。我可以在开发人员工具中使用分析器选项卡，但似乎真正告诉我的是脚本花费了多少总时间，这不仅仅是 css-in-js 解析。

所以我的问题是，有没有人知道一种方法可以在实际应用程序中了解 css-in-js 的性能成本？也许有一种我不知道的性能标签的好方法？

任何帮助是极大的赞赏！

要使用下一个 js 设置 linaria，我们可以使用next-linaria包，如with-linaria示例所示。为 linaria 设置下一个 js，我们可以做npx create-next-app -e with-linaria. 但是，我在 turbo repo monorepo 中将 linaria 添加到 ui 包时遇到了麻烦。

以下是脚手架的目录结构npx create-turbo

我也想将 linaria 用于 ui 组件。

我在我的应用程序中使用 React 和 TypeScript。如何摆脱以下错误？

然后我得到这个打字稿错误：

（属性）颜色：“默认”| “红” | “绿色” | “蓝色”类型'字符串| undefined' 不可分配给类型 '"default" | “红” | “绿色” | “蓝色的”'。类型“未定义”不可分配给类型“默认”| “红” | “绿色” | "blue"'.ts(2322) color.ts(2, 3): 预期的类型来自属性'color'，它在'Color'类型上声明