如何在Rollup+Next.js中使用styled-components？样式未生效求助

1. 调整Rollup的PostCSS配置，确保样式正确打包 #

当前Rollup的postcss插件默认将CSS内联到JS bundle中，但Next.js处理本地link的包时可能无法正确解析。修改Rollup配置，提取独立CSS文件或确保内联样式被正确注入：

修改rollup.config.mjs中的postcss插件配置：

postcss({
  extensions: ['.css'],
  extract: true, // 提取CSS到单独文件（推荐）
  modules: false, // 若未使用CSS Modules，设为false
  inject: false, // 配合extract使用，禁止内联注入
})

同时在组件库的src/index.ts中导入全局样式文件（如存在），确保Rollup打包时包含样式。

2. 让Next.js编译本地link的组件库 #

Next.js默认不会编译node_modules中的包，但yarn link的本地组件库需要被编译才能正确解析样式。修改next.config.js添加transpilePackages：

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: false,
  compiler: {
    styledComponents: {
      cssProp: true,
    },
  },
  transpilePackages: ['你的组件库包名'], // 替换为组件库package.json中的name字段值
};

3. 统一Styled-Components配置，避免版本冲突 #

• 确保组件库与Next.js项目的styled-components版本完全一致，组件库的package.json中应将其放在peerDependencies（已通过peerDepsExternalPlugin处理），Next.js项目需安装对应版本。
• 移除.babelrc中的babel-plugin-styled-components，Next.js的内置编译器已集成该功能，重复配置会导致冲突。

4. 手动导入组件库样式（若提取了独立CSS） #

如果Rollup生成了独立的CSS文件，在Next.js的_app.tsx（或_app.js）中手动导入：

import '你的组件库包名/dist/[生成的CSS文件名].css';

替换为实际生成的CSS文件名（通常在组件库dist目录下）。

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