首页 > 解决方案 > 如何将 Tailwind 2.0 安装到现有项目 (rails 6.1)

问题描述

我正在尝试将 Tailwind 2.0 安装到现有项目(rails 6.1)但出现错误:

如何在现有 Rails 项目(6.1 和 sprocket)上安装 Tailwind 2.0

在我的 gemfile 中,我添加了:

gem "webpacker", github: "rails/webpacker", ref: 'b6c2180'

应用程序/javascript/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from '@rails/activestorage';
import '../utils/direct_uploads.js';
require("app/javascript/stylesheets/application.css")
Rails.start();
Turbolinks.start();
ActiveStorage.start();

app/views/layouts/application.html.erb :

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

在文件夹 app/javascript/stylesheets/

应用程序/javascript/stylesheets/application.css

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

文件tailwind.config.js

rails webpacker:install并且已经运行rails s但得到一个错误:

Webpacker::Manifest::MissingEntryError - Webpacker can't find application.css in /Users/ben/code/Tioneb12/postgis/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "entrypoints": {
  }
}

我正在努力 :

rails asset:clobber
yarn
rails asset:precompile

并得到另一个错误:

/Users/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory looking for modules in /Users/ben/node_modules
No description file found looking for modules in /Users/ben/code/Tioneb12/postgis/node_modules
using description file: /Users/ben/code/Tioneb12/postgis/package.json (relative path: ./node_modules)
using description file: /Users/ben/code/Tioneb12/postgis/package.json (relative path: ./node_modules/babel-loader)
no extension /Users/ben/code/Tioneb12/postgis/node_modules/babel-loader doesn't exist
.js
/Users/ben/code/Tioneb12/postgis/node_modules/babel-loader.js doesn't exist
No description file found .json
/Users/ben/code/Tioneb12/postgis/node_modules/babel-loader.json doesn't exist no extension
/Users/ben/node_modules/babel-loader doesn't exist as directory
/Users/ben/code/Tioneb12/postgis/node_modules/babel-loader doesn't exist .js
/Users/ben/node_modules/babel-loader.js doesn't exist .json
/Users/ben/node_modules/babel-loader.json doesn't exist as directory
/Users/ben/node_modules/babel-loader doesn't exist

标签: ruby-on-railswebpackruby-on-rails-6tailwind-cssruby-on-rails-6.1

解决方案


只需删除tmp/cache/assets为我工作的文件夹;)


推荐阅读