css - Lägga till stil på TypeScript, React NPM-paket

Jag har ett TypeScript (TS), React-projekt som jag använder för att hålla alla mina React-komponenter. Jag skapar ett NPM-paket av detta projekt som jag sedan använder i separata React-projekt. Jag stöter på ett problem där jag inte vet hur jag ska exportera stylingen tillsammans med TS-komponenterna.

Att använda komponenter från NPM-paketet resulterar i fel: Module not found: Can't resolve '../css/footer.css'

När jag skapar min katalog för paketering (dist) finns alla mina komponenter där men ingen av CSS-filerna. Jag kör tsc för att skapa denna katalog. Alla mina komponenter och CSS ligger inom samma src-mapp.

Här är min tsconfig.json-fil:

{
  "compilerOptions": {
    "outDir": "dist",
    "target": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

Behöver jag flytta min styling från CSS-filer och in i TS-filer som använder <style jsx>-taggen, eller finns det ett annat 'bättre' sätt att uppnå önskat resultat? Det önskade resultatet är ett NPM-paket som innehåller all styling och alla komponenter samlade i ett paket.

Svar #1

tsc är kommandot för att kompilera TypeScript-filer till Javascript. CSS-filer är inte TypeScript-filer vilket är anledningen till att de inte inkluderas i kompileringen.

Om du vill importera CSS (eller andra typer av tillgångar) och exportera det tillsammans med dina andra kompilerade filer, vill du förmodligen använda en bundlare som Webpack eller Rollup. Det finns till och med verktyg som Microbundle som erbjuder rimlig bundler-konfiguration så att du kan fokusera på att skriva ditt bibliotek.

Alternativt kan du skriva dina stilar i TypeScript också, med ett bibliotek som styled-jsx.

Även om du inte är intresserad av att använda en, är det värt att ta en titt på de olika mallarna för TypeScript + React npm-paket för att se hur de fungerar.

• https://github.com/pankod/react-typescript-npm-package-boilerplate
• https://github.com/dstpierre/react-npm-typescript-boilerplate