Блог

Я пытаюсь создать шаблоны электронной почты, скомпилировав статические компоненты React Typescript в HTML. Компиляция прошла успешно, когда стили не были добавлены, но когда я импортирую файл Tailwindcss в один из компонентов Typescript, моя сборка завершается неудачно, и вот как выглядит мой стек ошибок:

 /home/Desktop/react-prototype/react-static-render/dist/tailwind.css:29
html {
     ^

SyntaxError: Unexpected token '{'
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/yogita/Desktop/saltycrane-react-prototype/typescript-react-static-render-script/dist/render.js:30:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
 

Сначала я пытаюсь создать файл tailwind.css, а затем импортировать его в компоненты Typescript.
Вот как я tsconfig выгляжу:

 {
  "compilerOptions": {
    "baseUrl": ".",
    "module": "commonjs",
    "esModuleInterop": true,
    "jsx": "react",
    "lib": ["dom", "es2019"],
    "outDir": "dist",
    "paths": {
      "*": ["src/*", "src/@types/*"]
    }
  },
  "include": ["src/*.tsx"]
}
 

Я не могу понять, как построить конвейер для этого. Нужно ли мне добавлять какие-либо другие параметры компилятора в вышеуказанный файл или мне нужно использовать Babel или Webpack, прежде чем кто-либо сможет предложить?