在 Rails 6 中使用 webpacker 导入 CSS [英] Importing CSS with webpacker in Rails 6

问题描述

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

I use webpacker with Rails and am installing taildwindcss right now. Their installation guide says to use an @import method if I'm using postcss-import. I must say I get confused whenever I have to import CSS to Rails with webpacker, so I have a few questions:

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

1) The @import method from the docs - is it a JavaScript or CSS import method?

2) 如果它是一个 CSS 方法，为什么我必须将它粘贴到 javascript 文件夹中(例如 javascript/stylesheets?我试图将它放在 application.css 文件中，但它没有工作.我认为这与它使用 PostCSS 并且包是通过纱线安装的事实有某种关系?

2) If it's a CSS method, why do I have to paste it inside javascript folder (e.g. javascript/stylesheets? I tried to put it inside the application.css file and it doesn't work. I assume it is somehow related to the fact that it's using PostCSS and package was installed via yarn?

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

3) If the above is true, does it mean that I have to import every CSS package that way if it's installed via yarn?

推荐答案

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

You will likely want to actually want to import into the CSS and javascript!

通常的设置将有 app/javascript/styles/application.css 例如，它将引导您的全局 css:

The typically setup will have app/javascript/styles/application.css for example which will bootstrap your global 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 中，您将导入:

In your app/javascript/packs/application.js you will import this:

// other js

import('styles/application.css');

// other js

在您的布局中，您将添加 <%= stylesheet_pack_tag 'application' %> 以添加来自 application.js 的 css 和 <%= javascript_pack_tag 'application' %> 从 application.js 添加 javascript.

In your layout you will add <%= stylesheet_pack_tag 'application' %> to add the css from application.js and <%= javascript_pack_tag 'application' %> to add the javascript from application.js.

这个设置的原因是 webpack 将处理 application.js，它将单独处理 CSS 和 JS.将 javascript/pack/application.js 想象成一个引导程序/依赖项文件，而不是一个正在运行的 javascript 文件.它是说这是我需要做的事情的列表.在这种情况下，其中一件事是 app/javascript/styles/xyz.css，顺便说一句，使用 post-css 来管理它的处理方式.

The reason for this setup is that webpack is going to process application.js and it will handle the CSS and JS separately. Think of javascript/pack/application.js more of a bootstrap/dependencies file than a running javascript file. It's saying here's a list of stuff I need to work. In this case, one of the things is app/javascript/styles/xyz.css, and by the way, use post-css to manage how it is processed.

这篇关于在 Rails 6 中使用 webpacker 导入 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！