1

我使用rails new demo -j esbuild --css tailwind. 我正在antd为组件使用包，并希望将 ant 设计样式表与 tailwind 样式表一起使用。

Tailwind有一种方法可以将外部样式表添加到其默认样式中。我使用它并将application.tailwind.css文件设置为此：

@import "~antd/dist/antd.css";

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

现在，当我运行时./bin/dev，antd既没有应用样式，也没有在生成的app/assets/builds/application.css文件中存在这些样式类。

看起来顺风覆盖了蚂蚁的设计风格。

如果我保留application.tailwind.css并添加

import 'antd/dist/antd.css';

到我的index.js根文件，然后才会antd应用样式并出现在生成的app/assets/builds/application.css. 但是随后删除了 tailwindcss 类。

我怎样才能在生成的同时拥有蚂蚁设计风格和顺风风格app/assets/builds/application.css？

4

1 回答 1

1

这就是我最终在 Rails 7 中使用 esbuild 和 TailwindCSS 链接我自己的样式表的方式。

目前如果你运行rails new demo --css tailwindRails 将使用tailwindcss-rails gem

但是，如果您在创建新应用程序时像使用 esbuild 一样传递 javascript 选项，它将改用 esbuild cssbundling-rails gem。rails new demo -j esbuild --css tailwind.

cssbundling-rails gem 的文档说

如果要将 @import 语句用作 Tailwind application.js 文件的一部分，则需要将 Tailwind 配置为使用 postcss，然后再使用 postcss-import。但是您也应该考虑直接引用您的其他 CSS 文件，而不是将它们全部捆绑到一个大文件中。它更适合缓存，而且设置更简单。您可以通过扩展 application.html.erb 中的 stylesheet_link_tag 来引用其他 CSS 文件，如下所示：<%= stylesheet_link_tag "application", "other", "styles", "data-turbo-track": "reload" %>。

https://github.com/rails/cssbundling-rails#how-do-i-import-relative-css-files-with-tailwind

users我创建了一个新的css文件，名为app/assets/stylesheets/users.css

在application.html.erb我users在. application_stylesheet_link_tag

<%= stylesheet_link_tag "application", "users", "data-turbo-track": "reload" %>

在图像和构建之后app/assets/config/manifest.js添加。//= link users.css

于 2021-12-29T16:28:21.700 回答