NX工作区React UI库SCSS模块类名无类型提示及访问异常问题

检查TypeScript配置 #

• 确保库的tsconfig.lib.json（或根目录tsconfig.json）中：
  • compilerOptions.moduleResolution设置为"node"
  • compilerOptions.declaration设为true（库需要生成类型声明）
  • include数组包含SCSS模块路径，比如"src/**/*.module.scss"
  • typeRoots包含"node_modules/@types"，确保类型依赖被识别

配置typescript-plugin-css-modules插件 #

• 安装依赖：

  npm install typescript-plugin-css-modules --save-dev
  # 或使用yarn
  yarn add typescript-plugin-css-modules -D
  

• 在库的tsconfig.lib.json的compilerOptions中添加插件配置：

  "plugins": [
    {
      "name": "typescript-plugin-css-modules",
      "options": {
        "cssModules": {
          "mode": "local"
        }
      }
    }
  ]
  

验证NX库构建配置 #

• 打开库的project.json，检查build目标的配置：
  • 如果使用Webpack，确保@nx/react:webpack-browser的options.stylePreprocessorOptions正确关联SCSS路径，且CSS Modules功能启用
  • 如果使用Vite，确认@nx/vite:build的配置中开启了CSS Modules，比如在css.modules里设置localsConvention: "camelCase"（支持驼峰类名的点语法访问）

手动生成类型声明（应急方案） #

如果自动生成失效，可手动为SCSS模块创建类型文件，比如styles.module.scss.d.ts：

declare const styles: {
  readonly container: string;
  // 补充其他需要的类名
};
export default styles;

刷新编辑器TypeScript服务 #

• 在VS Code中按Ctrl+Shift+P，选择Restart TypeScript Server，或者直接重启编辑器，确保配置更新生效

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