无法在 Rails 7 中添加带有顺风的 ant 设计样式表答案

【问题标题】：Unable to add ant design stylesheets with tailwind in Rails 7无法在 Rails 7 中添加带有顺风的 ant 设计样式表
【发布时间】：2022-01-24 10:52:31
【问题描述】：

我使用rails new demo -j esbuild --css tailwind 创建了一个 Rails 7 应用程序。我正在为组件使用 antd 包，并希望将 ant design 样式表与 tailwind 样式表一起使用。

Tailwind has a way 将外部样式表添加到其默认样式中。我使用它并将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 中同时拥有 ant 设计风格和顺风风格？

【问题讨论】：

标签： ruby-on-rails antd tailwind-css esbuild ruby-on-rails-7

【解决方案1】：

这就是我最终将我自己在 Rails 7 中的样式表与 esbuild 和 TailwindCSS 链接起来的方式。

目前，如果您运行 rails new demo --css tailwind，Rails 将使用 tailwindcss-rails gem

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

cssbundling-rails gem 的文档说

如果您想在 Tailwind 中使用 @import 语句 application.js 文件，您需要配置 Tailwind 以使用 postcss 和然后 postcss 导入。但您也应该考虑简单地参考您的其他 CSS 文件直接，而不是将它们捆绑在一起大文件。它更适合缓存，而且设置更简单。你可以通过扩展 stylesheet_link_tag 来引用其他 CSS 文件 application.html.erb 像这样：。

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

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

在application.html.erb 中，我在stylesheet_link_tag 的application 样式表之后添加了新的users 样式表。

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

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

【讨论】：

谢谢。这行得通。