时间戳

首页 > 解决方案 > Tailwind 2.1 + Rails 6 + React 设置期间的错误

ruby-on-rails - Tailwind 2.1 + Rails 6 + React 设置期间的错误

问题描述

好的，

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

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

我尝试按照 Tailwind 指南配置 Postcss，但没有成功。

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

当我运行 webpack-dev-server 时，我不断收到此错误：

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 已经使用 tailwind postcss 插件正确配置：

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

它应该工作，对吧？我不知道我做错了什么。:(

我的目标很简单：

非常感谢您耐心阅读并尝试帮助我解决这个问题！

标签： ruby-on-railsreactjswebpacktailwind-csswebpacker

解决方案

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

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";

您可以在 postcss 文件中指定 tailwind.config.js 的位置（我将我的保存在上面的样式表目录中）。

要启用 JIT，请在 tailwind.config.js 中添加以下行。mode: "jit" 告诉 tailwind 到 jit 并且 purge 行告诉它你将视图文件保存在哪里，以作为 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）

我认为您在 application.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)

好旅行！

推荐阅读