Tailwind 2.1+Rails 6+React设置期间出现错误

Question

好的，

这是我第四次上网寻找如何正确设置Tailwind 2.1的答案。

在我的配置中，我有一个Rails 6项目，配置了Webpacker 6(Beta(、Webpack 5、React和Sass。

我试着按照Tailwind指南来配置Postpass，但没有成功。

为了使这种交流更容易，我在我的项目中托管了一个简单的存储库。https://github.com/renatodex/rails6-tailwind21-webpacker6-webpack-5

当我运行webpack-dev服务器时，我一直收到这个错误：

ERROR in ./app/packs/entrypoints/hello_react.pcss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import "tailwindcss/base";
|
| @import "tailwindcss/components";
webpack 5.39.1 compiled with 1 error in 1929 ms
ℹ ｢wdm｣: Failed to compile.

然而，正如您所看到的，postconfig已经使用顺风postpass插件进行了正确配置：

module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
}),
require('tailwindcss'),
require('autoprefixer')
]
}

它应该起作用，对吧？我不知道自己做错了什么(

我的目标很简单：

• 使用Tailwind 2.1和JIT(Just-in-Time(以及React，使用Rails Webpacker，设置一个功能齐全的Rails 6项目

我非常感谢你的耐心阅读并试图在这方面帮助我！

Answer 1

我不会说你的方法是错误的，但我一直看到的目录结构

app/javascript/packs/application.js
app/javascript/stylesheets/application.scss

带有application.js 中的导入行

import "../stylesheets/application"

我的application.scss的前3行是：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

您可以在postpass文件中为tailwind.config.js指定一个位置(如上所述，我将其保存在样式表目录中(。

要启用JIT，请在tailwind.config.js中使用以下行。模式："；jit"；告诉tailwind给jit，清除行告诉你把你的视图文件放在哪里，让它以jit为基础

module.exports = {
mode: "jit",
purge: ["./app/views/**/*"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}

(https://www.youtube.com/watch?v=QwUpnXumcw4)

我想你的应用程序.js中遗漏了一些重要的东西。这是我的，你可能会发现它很有用。

import Rails from "@rails/ujs"
import "@hotwired/turbo-rails"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "stimulus"
Rails.start()
ActiveStorage.start()
import "../stylesheets/application"
import "controllers"
const images = require.context("../images", true)

旅途愉快！