Import css from a file in shared module or node module in next js

Question

My setup: I have a mono repo with multiple NextJS app sharing component from a shared module. The apps and shared module are individual workspaces managed by npm workspace. I m using css modules and post css for my NextJS apps.

Problem: I want to import a css file from a shared module to css files in the NextJS apps. For example, I want to do something like @import @shared/shared.css in my css file for one of my component in the NextJS app.

Solutions tried:

postcss-import - works but its weird to import css files within the shared module components from shared modules using full package name. I hear relative path root can be specified using from but not really good doc.
tried something like @import ~@shared/shared.css. My IDE actually recognizes the path and is happy but the application fails to resolve the import and errors out like this: 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.

Thank you in advance

Does this answer your question: Is it possible to include one CSS file in another?? Try importing it as @import "@shared/shared.css"; in your CSS file. — juliomalves
– juliomalves, Commented Jul 9, 2021 at 14:03
hi @juliomalves. that does not solve my issue. The postcss-import solves it but i m trying to see if there is a better way without using that lib. — Mandark
– Mandark, Commented Jul 9, 2021 at 20:09

AirOne01 · Accepted Answer · 2024-04-08 19:54:34Z

2

You can use next-transpile-modules package. The way you use it

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

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

Worked for me with no issues. I used rush.

edited Apr 8, 2024 at 19:54

AirOne01

2871 gold badge3 silver badges15 bronze badges

answered Feb 14, 2022 at 6:55

Yusuf

2,4081 gold badge20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Import css from a file in shared module or node module in next js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related