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

Question

我的设置： 我有一个单一存储库，其中包含来自共享模块的多个 NextJS 应用程序共享组件。应用程序和共享模块是由 npm 工作区管理的单独工作区。我正在为我的 NextJS 应用程序使用 css 模块和 post css。

问题： 我想将 css 文件从共享模块导入到 NextJS 应用程序中的 css 文件。例如，我想在我的 css 文件中为 NextJS 应用程序中的一个组件执行类似

@import @shared/shared.css

的操作。

尝试过的解决方案：

1. postcss-import - 可以工作，但是使用完整包名称从共享模块导入共享模块组件中的 css 文件很奇怪。我听说可以使用

   from

   指定相对路径根，但不是很好的文档。
2. 尝试过类似

   @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.

提前谢谢您

Answer 1

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

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

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

为我工作没有任何问题。我用了冲。