如何在兼容Next.js的Node模块中使用CSS/CSS模块？

核心解决方案：配置Next.js转译目标模块 #

Next.js默认仅转译项目内部文件，对node_modules中的模块会跳过CSS处理。要让它支持你的UI模块中的CSS/CSS模块，只需在next.config.js中配置transpilePackages，指定需要转译的包名：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['你的UI模块包名'], // 替换成实际包名，比如'my-custom-ui'
}

module.exports = nextConfig

配置后，Next.js会对指定的UI模块进行完整转译，包括处理其中的*.module.css文件，和你在项目内使用CSS模块的逻辑完全一致。

注意事项 #

• 确保UI模块中的样式文件严格遵循CSS模块命名规则：文件名必须以.module.css结尾（比如Card.module.css）
• 模块内组件要正确导入样式并使用类名：

  import styles from './Card.module.css'
  
  export default function Card() {
    return <div className={styles.container}>卡片内容</div>
  }
  

替代方案（若上述方法不可行） #

如果因为模块权限、结构限制等原因无法配置转译，可以尝试以下方案：

1. 提取全局CSS导入 #

把UI模块中的CSS文件提取到Next.js项目的styles/目录下，然后在_app.js（或_app.tsx）中全局导入：

// pages/_app.js
import '../styles/ui-library.css'
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

这种方式会丢失CSS模块的类名隔离性，需要注意避免类名冲突。

2. 预打包UI模块 #

如果是你自己维护的UI模块，可以用Rollup、Webpack等工具将CSS打包进组件代码：

• 使用css-loader + style-loader将样式直接注入DOM
• 或用mini-css-extract-plugin将CSS提取为单独文件，发布模块时一并打包，再在Next.js项目中导入该CSS文件

3. 改用CSS-in-JS #

虽然你偏好传统CSS，但如果以上方案都不适用，CSS-in-JS（如Styled Components、Emotion）是Next.js官方推荐的方案之一，无需额外配置即可在Node模块中使用样式。

内容的提问来源于stack exchange，提问作者Viggo BF