如何配置Rollup插件分别处理CSS Modules与未混淆的Sass文件？

核心思路 #

通过约定文件命名规则区分两种样式文件，让postcss插件针对不同文件应用不同处理逻辑：

• CSS Modules文件统一用[name].module.scss命名（行业通用规范）
• 普通SCSS文件保持原命名（如global.scss）

配置修改方案 #

把原配置改成以下形式，利用modules选项的函数模式，根据文件名判断是否启用CSS Modules：

postcss({
  extract: true, // 改为true才能生成独立的单个.css文件（原配置extract: false会把CSS嵌入JS，不符合需求）
  modules: (id) => id.endsWith('.module.scss'), // 仅对.module.scss后缀的文件启用类名混淆
  use: ['sass'],
  getExport: false, // 普通SCSS无需导出类名到JS
}),

关键说明 #

1. extract选项调整：原配置extract: false会将CSS打包进JS，要生成独立.css文件必须设为true
2. 精准匹配规则：通过文件后缀筛选需要启用CSS Modules的文件，其余SCSS文件类名将保持原样编译
3. 使用规范：
   • 全局/普通样式：用.scss后缀，类名直接保留在输出CSS中，可直接在HTML或全局代码里引用
   • 组件级模块化样式：用.module.scss后缀，类名会被混淆，需通过JS导入后使用（如import styles from './Button.module.scss'）

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