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

Question

我正在尝试为包含 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 个可能相关的额外观察结果。首先，安装 tailwind 并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

Hey I struggled on this issue today, managed to work it out and made a library to hopefully help people out.

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

In an existing react-static site run:

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

Then add the plugin to your static.config.js:

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

Now you can add @tailwind directives to your .css files

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

Overview of what the plugin does is just add tailwindcss to your postcss plugins.

Object.assign(postcssLoader.options, {
  plugins: [require("tailwindcss"), ...(plugins.length ? plugins : [])]
});