使用Rollup结合SCSS Modules时样式不生效问题求助

问题核心 #

你遇到的情况是：Rollup把SCSS Modules编译成了JS模块（通过JS动态注入样式），但Next.js 14的Tree Shaking机制会忽略样式模块的副作用代码——虽然组件元素能拿到正确的类名，但样式并没有被注入到DOM里。

解决方案 #

1. 给组件包添加sideEffects配置

在组件包根目录的package.json里加上sideEffects字段，告诉打包工具（Next.js用的webpack/Rspack）这些样式文件有副作用，不能被随便删掉：

{
  "sideEffects": ["*.scss", "*.css", "*.module.scss", "*.module.css"]
}

这一步是关键，没有它的话，Next.js会认为样式模块只是导出了类名字符串，没有实际执行代码，直接把样式模块从打包结果里剔除了。

2. 优化Rollup的PostCSS配置（可选）

显式配置PostCSS的inject选项为true，同时可以指定类名生成规则避免冲突：

postcss({
  plugins: [autoprefixer()],
  modules: {
    generateScopedName: "[name]__[local]___[hash:base64:5]",
    scopeBehaviour: "local"
  },
  minimize: true,
  use: ["sass"],
  inject: true // 确保样式通过JS注入DOM
}),

3. 简化组件导入路径（可选）

在组件包的package.json里配置exports字段，让Next.js导入组件更简洁，也能避免路径错误：

{
  "exports": {
    "./components/Test": "./dist/esm/components/Test/Test.js"
  }
}

之后在Next.js里就可以这样导入：

import { Test } from "@你的组件包名/components/Test";

验证步骤 #

1. 重新构建组件包，确保package.json的sideEffects配置生效
2. 在Next.js项目里重新安装组件包（用npm link调试的话就重新link）
3. 启动Next.js项目，检查元素样式是否正常加载

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