在 Rails 6 中使用 webpacker 导入 CSS

Question

我将 webpacker 与 Rails 一起使用，现在正在安装 taildwindcss。如果我使用 postcss-import，他们的 installation guide 说要使用 @import 方法。我必须说，每当我必须使用 webpacker 将 CSS 导入 Rails 时，我都会感到困惑，所以我有几个问题：

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

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

安装的事实有某种关系

3) 如果以上内容属实，是否意味着我必须以这种方式导入每个 CSS 包（如果它是通过 yarn 安装的）？

Answer 1

您可能真的想要导入 CSS 和 javascript!

典型的设置会有 app/javascript/styles/application.css 例如这将 bootstrap 你的全局 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 和 <%= javascript_pack_tag 'application' %> 以添加来自 application.js 的 javascript .

此设置的原因是 webpack 将处理 application.js 并且它将单独处理 CSS 和 JS。将 javascript/pack/application.js 视为 bootstrap/dependencies 文件而不是运行 javascript 文件。它说 here's a list of stuff I need to work。在这种情况下，其中一个事情是app/javascript/styles/xyz.css，顺便使用post-css来管理它的处理方式。

在 Rails 6 中使用 webpacker 导入 CSS

Importing CSS with webpacker in Rails 6

ruby-on-rails

webpacker