css - სტილიზაციის დამატება TypeScript, React NPM პაკეტში

მე მაქვს TypeScript (TS), React პროექტი, რომელსაც ვიყენებ ჩემი ყველა React კომპონენტის შესანახად. მე ვქმნი ამ პროექტიდან NPM პაკეტს, რომლის შემდეგაც ვცდილობ მას სხვადასხვა React პროექტებში გამოყენებას. მე ვხვდები პრობლემას, როდესაც არ ვიცი როგორ გამოვყო სტილები TS კომპონენტებთან ერთად.

NPM პაკეტის კომპონენტების გამოყენება იწვევს შეცდომებს: Module not found: Can't resolve '../css/footer.css'

როდესაც მე ვქმნი ჩემს დირექტორიას პაკეტირებისთვის (dist), ყველა ჩემი კომპონენტი იქ არის, მაგრამ CSS არა. მე ვასრულებ tsc, რათა შევქმნა ეს დირექტორია. ყველა ჩემი კომპონენტი და CSS იმყოფება ერთსა და იმავე src ფოლდერში.

Დააიგივე ჩემი tsconfig.json ფაილი:

{
  "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"
  ]
}

მჭირდება თუ არა ჩემი სტილის CSS ფაილებიდან TS ფაილებში გადატანა, რომლებიც იყენებენ <style jsx> ტეგს, ან არსებობს სხვა 'საუკეთესო' გზა სასურველი შედეგის მიღებისთვის. სასურველი შედეგი არის NPM პაკეტი, რომელიც შეიცავს ყველა სტილს და კომპონენტს ერთში.

პასუხი #1

tsc არის ბრძანება TypeScript ფაილების Javascript-ში კომპაილაციისთვის. CSS ფაილები არ არის TypeScript ფაილები, ამიტომ ისინი კომპილაციაში არ არის ჩართული.

თუ გსურთ CSS-ის (ან ნებისმიერი სხვა ტიპის რესურსის) იმპორტირება და მისი გამოქვეყნება თქვენს სხვა კომპილირებულ ფაილებთან ერთად, მაშინ ალბათ გსურთ გამოიყენოთ ბანდლერი, როგორიცაა Webpack ან Rollup. არსებობს ასევე ისეთი ინსტრუმენტები, როგორიცაა Microbundle, რომლებიც უზრუნველყოფენ გონივრულ ბანდლერის კონფიგურაციას, რათა თქვენ შეძლოთ თქვენი ბიბლიოთეკის წერისკენ კონცენტრირება.

ალტერნატიულად, თქვენ შეგიძლიათ საკუთარი სტილები TypeScript-შიც დაწეროთ, styled-jsx-ის მსგავს ბიბლიოთეკასთან ერთად.

მიუხედავად იმისა, რომ თქვენ შესაძლოა არ გინდოდეს მისი გამოყენება, ღირს TypeScript + React npm პაკეტებისთვის სხვადასხვა შაბლონების განხილვა იმის გასაგებად, როგორ მუშაობენ ისინი.

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