在 Rails 6 中使用 webpacker 导入 CSS

Question

我在 Rails 中使用 webpacker，现在正在安装 taildwindcss。他们的安装指南说，@import如果我使用postcss-import. 我必须说，每当我必须使用 webpacker 将 CSS 导入 Rails 时，我都会感到困惑，所以我有几个问题：

1)@import文档中的方法 - 它是 JavaScript 还是 CSS 导入方法？

2）如果它是一个 CSS 方法，为什么我必须将它粘贴到 javascript 文件夹中（例如javascript/stylesheets？我试图将它放在 application.css 文件中，但它不起作用。我认为它与它是使用 PostCSS 并且包是通过纱线安装的？

3）如果上述情况属实，是否意味着如果通过yarn安装，我必须以这种方式导入每个CSS包？

Answer 1

您可能想要真正想要导入到 CSS 和 javascript 中！

app/javascript/styles/application.css例如，典型的设置将引导您的全局 css：

@import "tailwindcss/base";

@import "tailwindcss/components";
@import "components/buttons"; // custom components that map to path app/javascript/styles/components/buttons.css for example

@import "tailwindcss/utilities";

在你的app/javascript/packs/application.js你将导入这个：

// other js

import('styles/application.css');

// other js

在您的布局中，您将添加<%= stylesheet_pack_tag 'application' %>从 application.js 添加 css 并从 application.js<%= javascript_pack_tag 'application' %>添加 javascript。

这种设置的原因是 webpack 将处理 application.js，它将分别处理 CSS 和 JS。想到javascript/pack/application.js更多的是引导的/依赖性文件比正在运行的JavaScript文件。是说here's a list of stuff I need to work。在这种情况下，其中一件事是app/javascript/styles/xyz.css，顺便说一下，使用 post-css 来管理它的处理方式。