tailwind-css - 使用 postcss-import 将 tailwindcss v1 添加到基本的 react-static 站点

Question

我正在尝试为包含 tailwindcss v1 和 postcss-import 的 react-static 站点设置启动器。我无法通过构建或启动进程来解析 @import "tailwindcss/xxx"指令。我用 tailwindcss v0.7.4 得到相同的结果

这就是我所做的......

react-static create选择 basic选项

yarn add tailwindcss@next

yarn add postcss-import

yarn tailwind init

已添加 postcss.config.js

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

我预计开发服务器会在源处理完毕后启动。

完整源代码可在 https://gitlab.com/support96/my-static-site.git 获得

Answer 1

嘿，我今天在这个问题上苦苦挣扎，设法解决了这个问题，并建立了一个图书馆，希望能帮助人们解决问题。

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

在现有的 react-static 站点中运行:

$ 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 : [])]
});