Добавьте tailwindcss v1 на базовый реактивный сайт с помощью postcss-import

Я пытаюсь настроить стартер для реактивно-статического сайта, включая tailwindcss v1 и postcss-import. Я не могу получить процессы сборки или запуска для разрешения директив @import "tailwindcss/xxx". Я получаю такой же результат с tailwindcss v0.7.4

Это то, что я сделал...

  1. react-static create выбирающий basic вариант
  2. yarn add tailwindcss@next
  3. yarn add postcss-import
  4. yarn tailwind init
  5. добавленной postcss.config.js
  6. Заменено содержание src/app.css с 3 @import заявления

Я пробовал много вариантов, таких как запуск с другими существующими проектами, изменение @import аргументы. например "../tailwindcss, "src/tailwindcss, "../src/tailwindcss, так далее

По сути, ничего из того, что я сделал, не изменило ошибку, только имя файла, который не может быть решен.

Тем не менее, есть 2 дополнительных наблюдения, которые могут иметь отношение к делу. Во-первых, попутный ветер установлен и npx tailwind build src/styles.css -o src/app.css генерирует рабочий файл попутного ветра из styles.css,

Во-вторых, postcss-import просто не происходит - изменение не влияет на результат.

// tailwind.config.js
module.exports = {
  theme: {},
  variants: {},
  plugins: []
}

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

/* src/app.css */
@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Сообщение об ошибке

  Error: ✖ ｢wdm｣: 
  ERROR in /Users/tech/Projects/ReactStatic/my-static-site/src/app.css
  Module build failed (from /Users/tech/Projects/ReactStatic/my-static-site/node_modules/extract-css-chunks-webpack-plugin/d  ist/loader.js):
  ModuleNotFoundError: Module not found: Error: Can't resolve './tailwindcss/base' in '/Users/tech/Projects/ReactStatic/my-s  tatic-site/src'
      at factory.create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/Compilation.js:823:10)
      at factory (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
      at resolver (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
      at asyncLib.parallel (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactory.js:  224:22)
      at /Users/tech/Projects/ReactStatic/my-static-site/node_modules/neo-async/async.js:2825:7
      at /Users/tech/Projects/ReactStatic/my-static-site/node_modules/neo-async/async.js:6886:13
      at normalResolver.resolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactor  y.js:214:25)
      at doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:15:1)
      at resolver.doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/UnsafeCachePl  ugin.js:37:5)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:15:1)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:27:1)
      at resolver.doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/DescriptionFi  lePlugin.js:42:38)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn43 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:  33:10), <anonymous>:16:1)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:27:1)
      at resolver.doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/DescriptionFi  lePlugin.js:42:38)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn1 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:16:1)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:15:1)
      at fs.stat (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js  :22:13)
      at process.nextTick (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/CachedInputFile  System.js:73:15)
      at processTicksAndRejections (internal/process/task_queues.js:79:9)
   @ /Users/tech/Projects/ReactStatic/my-static-site/src/App.js 7:0-19
   @ /Users/tech/Projects/ReactStatic/my-static-site/src/index.js
   @ multi react-hot-loader/patch ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js index.js

  Error: ✖ ｢wdm｣: 
  ERROR in /Users/tech/Projects/ReactStatic/my-static-site/src/app.css
  Module build failed (from /Users/tech/Projects/ReactStatic/my-static-site/node_modules/extract-css-chunks-webpack-plugin/d  ist/loader.js):
  ModuleNotFoundError: Module not found: Error: Can't resolve './tailwindcss/base' in '/Users/tech/Projects/ReactStatic/my-s  tatic-site/src'
      at factory.create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/Compilation.js:823:10)
      at factory (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
      at resolver (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
      at asyncLib.parallel (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactory.js:  224:22)
      at /Users/tech/Projects/ReactStatic/my-static-site/node_modules/neo-async/async.js:2825:7
      at /Users/tech/Projects/ReactStatic/my-static-site/node_modules/neo-async/async.js:6886:13
      at normalResolver.resolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/webpack/lib/NormalModuleFactor  y.js:214:25)
      at doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:15:1)
      at resolver.doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/UnsafeCachePl  ugin.js:37:5)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:15:1)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:27:1)
      at resolver.doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/DescriptionFi  lePlugin.js:42:38)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn43 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:  33:10), <anonymous>:16:1)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:27:1)
      at resolver.doResolve (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/DescriptionFi  lePlugin.js:42:38)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn1 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:16:1)
      at hook.callAsync (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/Resolver.js:238:5  )
      at _fn0 (eval at create (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/tapable/lib/HookCodeFactory.js:3  3:10), <anonymous>:15:1)
      at fs.stat (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js  :22:13)
      at process.nextTick (/Users/tech/Projects/ReactStatic/my-static-site/node_modules/enhanced-resolve/lib/CachedInputFile  System.js:73:15)
      at processTicksAndRejections (internal/process/task_queues.js:79:9)
   @ /Users/tech/Projects/ReactStatic/my-static-site/src/App.js 7:0-19
   @ /Users/tech/Projects/ReactStatic/my-static-site/src/index.js
   @ multi react-hot-loader/patch ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js index.js

Я ожидал, что сервер dev будет запущен после обработки источника.

Полный источник доступен на https://gitlab.com/support96/my-static-site.git

Источник

0 ответов

Привет, я сегодня боролся с этой проблемой, сумел решить ее и создал библиотеку, которая, надеюсь, поможет людям.

https://github.com/dev-warner/react-static-plugin-tailwindcss

В существующем реактивном статическом сайте запустите:

$ yarn add react-static-plugin-tailwindcss -D

Затем добавьте плагин в свой static.config.js:

export default {
  plugins: ["react-static-plugin-tailwindcss"]
};

Теперь вы можете добавлять директивы @tailwind в свои файлы.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

Обзор того, что делает этот плагин, просто добавляет tailwindcss к вашим плагинам postcss.

Object.assign(postcssLoader.options, {
  plugins: [require("tailwindcss"), ...(plugins.length ? plugins : [])]
});
Источник
Другие вопросы по тегам