从下一个 js 中的共享模块或节点模块中的文件导入 css答案

【问题标题】：Import css from a file in shared module or node module in next js从下一个 js 中的共享模块或节点模块中的文件导入 css
【发布时间】：2022-02-14 14:55:54
【问题描述】：

我的设置：我有一个带有来自共享模块的多个 NextJS 应用程序共享组件的单声道存储库。应用程序和共享模块是由 npm 工作区管理的单独工作区。我正在为我的 NextJS 应用程序使用 css 模块并发布 css。

问题：我想将共享模块中的 css 文件导入 NextJS 应用程序中的 css 文件。例如，我想在我的 CSS 文件中为 NextJS 应用程序中的一个组件执行类似 @import @shared/shared.css 的操作。

尝试过的解决方案：

postcss-import - 有效，但使用完整包名从共享模块导入共享模块组件中的 css 文件很奇怪。我听说可以使用 from 指定相对路径根目录，但不是很好的文档。
尝试过类似@import ~@shared/shared.css 的方法。我的 IDE 实际上可以识别路径并且很高兴，但应用程序无法解析导入并出现如下错误：error - ../node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[1]!../node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[2]!./components/common/ToastAlert/ToastAlert.module.css TypeError: Cannot destructure property 'file' of 'undefined' as it is undefined.

提前谢谢你

【问题讨论】：

这是否回答了您的问题：Is it possible to include one CSS file in another?？尝试在 CSS 文件中将其导入为 @import "@shared/shared.css";。
嗨@juliomalves。这并不能解决我的问题。 postcss-import 解决了它，但我想看看是否有更好的方法而不使用该库。

【解决方案1】：

您可以使用next-transpile-modules 包。你使用它的方式

// next.config.js
const withTM = require("next-transpile-modules");
const nextConfig = {...}

module.exports = withTM(["@shared"])(nextConfig);

为我工作没有问题。我用的是rush。

【讨论】：