使用打字稿和模块 css 反应库 [重复]

Posted 2023-03-13

【中文标题】使用打字稿和模块 css 反应库 [重复]

【英文标题】：React library with typescript and module css [duplicate]

【发布时间】：2020-07-09 04:37:58

【问题描述】：

对于带有 typescript 和模块 css 的 react 库，看起来应该如何？

我不知道 rolloup.config.js 在这种情况下应该是什么样子。

当我构建项目时出现错误

语义错误 TS2307：找不到模块 './MyComponent.module.css'。

我在 rollup.config.js 文件中有类似的东西

import typescript from 'rollup-plugin-typescript2'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import resolve from 'rollup-plugin-node-resolve'
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';

import pkg from './package.json'

export default 
  input: 'src/index.ts',
  output: [
    
      file: pkg.main,
      format: 'cjs',
      exports: 'named',
      sourcemap: true
    ,
    
      file: pkg.module,
      format: 'es',
      exports: 'named',
      sourcemap: true
    
  ],
  plugins: [
    peerDepsExternal(),
    postcss(
      extract: false,
      modules: true
    ),
    external(),
    resolve(),
    typescript(
      rollupCommonJSResolveHack: true,
      exclude: [
        '**/__tests__/**',
        '**/*.stories.tsx'
      ],
      clean: true
    ),
    commonjs(
      include: ['node_modules/**'],
      namedExports: 
        'node_modules/react/react.js': [
          'Children',
          'Component',
          'PropTypes',
          'createElement'
        ],
        'node_modules/react-dom/index.js': ['render']
      
    )
  ]

但它不起作用。如果 somone 可以使用 Typescript 和模块 css 创建简单的库项目，那就太好了。

【问题讨论】：

这能回答你的问题吗？ Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"

【参考方案1】：

在这里查看答案Can't import CSS/SCSS modules. TypeScript says "Cannot Find Module"

基本上你需要添加一个文件typings.d.ts，比如：

declare module "*.module.css" 
  const classes:  [key: string]: string ;
  export default classes;

【参考方案2】：

您可以使用 create-react-app 并创建一个类似 npx create-react-app myapp --typescript 的项目，然后将一个 mobular css 解决方案（如样式化组件）添加到您的项目中。这是集成 React 最简单的方法。