带引导程序的 Rails 资产管道

Posted 2023-03-29

【中文标题】带引导程序的 Rails 资产管道

【英文标题】：Rails assets pipeline with bootstrap

【发布时间】：2014-07-19 18:48:16

【问题描述】：

我知道这个问题已经讨论过几次，但我仍然找不到合适的方法。

我使用较少，我有 bootstrap.less（没有 gem）、global.less、variables.less、login.less。全部在 app/assets/stylesheet 目录中。

我的 application.less 看起来像这样：

 *= require 'bootstrap'
 *= require 'global'
 *= require 'login'

包括：

 <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>

我尝试使用：rake assets:clean assets:precompile 我试图以多种方式@import

我遇到的问题： login.less 和 global.less 在我 @import 之前看不到变量。 如果没有 !important，我无法覆盖引导指令，这让我非常困惑。即使我以正确的顺序将它们导入到我的 application.less 中，它仍然会生成一个大的 application.css，其中 bootstrap 位于末尾。我不明白。

我希望我的 less 文件以正确的顺序覆盖它。如果它编译成一个文件以使浏览器加载网站更快，那就太好了（我虽然 require 这样做但看起来不是这样）

请建议我该怎么做。我在这个问题上浪费了我的时间。

【问题讨论】：

你可以@import 'bootstrap/variables'

【参考方案1】：

如果您想更改引导变量并在文件中使用变量/混合，您应该创建一个名为 bootstrap_and_overrides.less 的文件，在那里您导入所有其他文件并以正确的顺序引导。

application.css 中应该需要这个单个文件（以及任何其他文件，如 query-ui.css 等）。不过，您不应该在 application.css 中包含引导文件。

您也可以直接使用 application.css.less，但我在使用这种方法时遇到了一些问题。

【参考方案2】：

我已经按照你说的做了。

我的应用程序.css：

 *= require general

general.less:

@import 'bootstrap';    
@import 'variables';
@import 'global';
@import 'login';

在全球范围内我有：

  border-radius: 0px;

如果没有 !important 就无法工作，因为它以某种方式被引导程序覆盖。这是唯一的问题，因为其余的工作正常......

...我正在写这篇文章的其余部分，而... 我的天啊。尤里卡：D 我用过：

input border-radius: 0;

但在引导程序中有：

.btn border-radius: 4px;

这是因为我不能在没有重要的情况下覆盖它！耶稣...

无论如何，感谢 Michal 的解决方案，因为它解决了所有其他问题。

【讨论】：

但是我有缓存问题：/

通过添加depend_on修复。问题是@imported less 文件由于某种原因没有被重新编译，我需要将depend_on 变量等添加到 bootstrap_and_overrides.less