[Bug] Import ao arquivo css com erro.

Oi, Lorenzo! Como vai?

O erro "Cannot find module './Botao.css'..." acontece porque o TypeScript não entende por padrão como importar arquivos .css.

Siga esses passos para resolver:

1. Crie uma declaração de módulo para CSS
   No seu projeto, crie um arquivo chamado declarations.d.ts dentro da pasta src/.

// src/declarations.d.ts
declare module '*.css';
declare module '*.module.css';

Isso ensina o TypeScript a aceitar arquivos CSS no import.

1. Se estiver usando Vite, garanta o arquivo de ambiente de tipos:

// src/vite-env.d.ts
/// <reference types="vite/client" />

1. Ajuste o tsconfig.json

Troque o moduleResolution para "bundler". Isso melhora a compatibilidade com arquivos estáticos como CSS:

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

1. Importe o CSS normalmente no componente

Veja este exemplo:

// src/Botao.tsx
import './Botao.css';

export function Botao() {
  return <button className="botao">Clique</button>;
}

/* src/Botao.css */
.botao {
  padding: 8px 12px;
  background-color: #06b9a1;
  color: white;
  border: none;
  border-radius: 4px;
}

Check-list rápido:

• Criou src/declarations.d.ts?
• O arquivo Botao.css está no caminho certo?
• Atualizou moduleResolution para "bundler"?
• Reiniciou o TS Server?

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.

Abraços e bons estudos!