React+Rollup+TS组件包样式导出问题及TS模块查找报错求助

一、修复TS2307模块找不到错误 #

1. 添加SCSS模块的类型声明 #

在项目src目录下新建types文件夹，创建scss.d.ts文件并写入以下内容：

declare module '*.module.scss' {
  const classes: { [key: string]: string };
  export default classes;
}

接着修改tsconfig.json的compilerOptions，添加类型声明目录的配置：

"compilerOptions": {
  // ... 其他配置
  "typeRoots": ["./src/types", "./node_modules/@types"]
}

2. 让Rollup识别@/Styles路径别名 #

• 先确保tsconfig.json的路径配置配套正确：

  "compilerOptions": {
    "baseUrl": "src",
    "paths": { "@/Styles/*": ["styles/*"] }
  }
  

• 安装路径解析插件：

  npm install @rollup/plugin-alias --save-dev
  

• 在rollup.config.js中引入并配置该插件：

  import alias from '@rollup/plugin-alias';
  
  export default {
    // ... 其他配置
    plugins: [
      alias({
        entries: [
          { find: '@/Styles', replacement: './src/styles' }
        ]
      }),
      // ... 其他插件
    ]
  }
  

二、修复Dist目录无样式文件并实现样式导出 #

1. 清理冲突的样式插件 #

当前配置同时使用postcss、sass、scss三个插件会导致功能冲突，保留postcss即可（它可兼容SCSS预编译），卸载多余插件：

npm uninstall rollup-plugin-sass rollup-plugin-scss --save-dev

2. 配置PostCSS输出独立样式文件 #

修改rollup.config.js中的postcss配置，让它提取样式为独立文件：

postcss({
  extract: true, // 提取为单独CSS文件
  minimize: true,
  use: ['sass'], // 启用SCSS编译
  modules: true, // 适配.module.scss的CSS模块语法
})

构建后dist目录会自动生成对应CSS文件（如dist/index.css）。

3. 让其他项目可引用样式 #

• 在package.json中添加files字段，确保样式文件被包含在发布包中：

  "files": [
    "dist"
  ]
  

• 其他项目使用组件包时，可直接导入样式：

  import 'your-component-package/dist/index.css';
  

最终Rollup配置示例 #

import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import alias from '@rollup/plugin-alias';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: "dist/index.js",
      format: 'esm',
      sourcemap: true
    }
  ],
  plugins: [
    external(),
    alias({
      entries: [
        { find: '@/Styles', replacement: './src/styles' }
      ]
    }),
    resolve(),
    typescript({ tsconfig: './tsconfig.json' }),
    postcss({
      extract: true,
      minimize: true,
      use: ['sass'],
      modules: true,
    }),
    terser()
  ]
}

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