5

我正在尝试为包括 tailwindcss v1 和 postcss-import 的 react-static 站点设置启动器。我无法获取构建或启动进程来解析 @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了 tailwind 并从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

4

1 回答 1

0

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

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 : [])]
});
于 2019-09-07T21:26:04.737 回答