Twitter bootstrap 资产中的重复引导导入

我试图在rails中使用bootstrap，在初始化器中使用gem'bootstrap sass'和以下设置

下面是我的application.css和common.css中的代码，这是我的资产结构的屏幕截图：

#app/assets/stylesheets/application.css.scss
 *= require_self
 *= require ./store/_common
 *= require font-awesome



#app/assets/stylesheets/store/_common.css.scss
// import the CSS framework
@import "bootstrap-sprockets";
@import "bootstrap-custom";
@import "footer";
@import "header";
..
..

问题是，尽管我已经在common.css中导入了引导文件，但我仍然必须在每个文件中手动导入它们，在这些文件中我要使用引导变量或mixin。e、 g.在

\u footer.css.scss

中，我试图使用变量

$gray lighter

或扩展

.thumbnail

类，并得到一个错误

Undefined variable: "$gray-lighter".

只要我添加@import“bootstrap变量自定义”行；在这个文件的顶部，错误消失了

我尝试如下更改application.css，同时从common.css中删除前两个导入，但没有成功：

 *= require_self
 *= require _bootstrap-sprockets
 *= require _bootstrap-custom
 *= require store/_common
 *= require font-awesome

Rails.application.config.assets.precompile += %w( dashboard/* dashboard.css dashboard.js store/taxons*)

#app/assets/stylesheets/application.css.scss
 *= require_self
 *= require ./store/_common
 *= require font-awesome


#app/assets/stylesheets/store/_common.css.scss
// import the CSS framework
@import "bootstrap-custom";
@import "footer";
@import "header";
.....
....


#app/assets/stylesheets/store/taxons_show.css.scss
@import "bootstrap-custom";

#product-listings {
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  .product_card {
    margin-bottom: 50px;
    border: none;
    @extend .thumbnail;
    h3 {
      color: $gray;
      margin-top: 10px;
      font-size: 1.5em;
    }
    .price {
      color: $gray;
      font-size: 1.7em;
    }
  }
}

更新：-我当前的结构如下，使用此结构，我不必在common.css中包含的每个文件中都包含bootstrap custom，但在其他每个文件（如taxons_show.css）中都需要它。我尝试将此引导自定义导入移动到application.css，但无效：

 *= require_self
 *= require _bootstrap-sprockets
 *= require _bootstrap-custom
 *= require store/_common
 *= require font-awesome

Rails.application.config.assets.precompile += %w( dashboard/* dashboard.css dashboard.js store/taxons*)

#app/assets/stylesheets/application.css.scss
 *= require_self
 *= require ./store/_common
 *= require font-awesome


#app/assets/stylesheets/store/_common.css.scss
// import the CSS framework
@import "bootstrap-custom";
@import "footer";
@import "header";
.....
....


#app/assets/stylesheets/store/taxons_show.css.scss
@import "bootstrap-custom";

#product-listings {
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  .product_card {
    margin-bottom: 50px;
    border: none;
    @extend .thumbnail;
    h3 {
      color: $gray;
      margin-top: 10px;
      font-size: 1.5em;
    }
    .price {
      color: $gray;
      font-size: 1.7em;
    }
  }
}

---

嗨，我将为你的项目举一个组织的例子，然后试着解释为什么我做了我所做的每一个更改，我还将假设你正在使用rails的最后一个版本，一些更改可能在以前的版本中不起作用，所以

#app/assets/stylesheets/application.scss
/*
*= require_self
*/
@import "bootstrap-custom";
@import "font-awesome";
@import "store/common";

---

首先rails现在只接受scss扩展，咖啡也是一样，所以我们要使用这个符号，这很重要，因为我们需要使用导入，而不是requires，requires是css的东西，我相信，使用来自scss的导入会知道它需要将这些文件预呈现到css，例如，如果您使用一个变量文件，然后需要另一个引导文件，那么在内部，您将有一个变量的css编译和引导文件的css编译，其中一个将有通信，据说符号表示，通过将您的文件预先命名为“u”，应该知道这些是文件的一部分，所以在理论上，你可以导入这些文件作为scss文件，并在之前编译它，但从我的上一个项目中，我遇到了一些问题，只能从1层做，这意味着我可以从子文件调用一个文件，你明白吗？希望如此。。。 所以我通常选择在顶部导入我的引导自定义，因为引导非常大，很多时候它会覆盖我目前正在使用的其他库

接下来是我们的引导自定义文件

@import "bootstrap-sprockets";
@import "bootstrap/bootstrap-variables";
@import "bootstrap";

//for example
html{
    //need it for sticky footer
    position: relative;
    min-height: 100%;
    body{
        padding-top: $navbar-height + 30px;
        padding-bottom: 350px;
    }
}

好的，链轮，总是排在第一位的，是所有的基本依赖项，然后我个人喜欢有一个引导变量的副本，并从这里尽可能多地修改我的自定义，许多这些工作结合在一起，所以如果你从这里做的话，你将有许多免费的修改，而且我认为更清楚，然后是我需要的任何更改，作为下面的scss代码，您需要记住，变量中的任何更改都将在下一次导入“bootstrap”时起作用，它们类似于| |=赋值，这意味着如果在取默认值之前没有给出任何值，那么在引导之前导入这些值

通常，引导的问题是同一文件的多个导入或SCS预编译部分的导入在文件之间不产生交互，请考虑witch文件应该是SCS，witch文件应该是css（通常是预编译库文件）

最后

Rails.application.config.assets.precompile += %w( )

这个地方是用来存放应用程序文件之外的文件的，因此，由于您使用的是*=require\u self，因此无需再次导入，您可以始终使用其他文件，但这是另一个历史记录，因此您应该添加png、gif、字体等文件，或者是*.png的泛化，但如果您的文件结构正确，rails应该让您确切地知道您需要的文件，如果您看到的文件太多，可能会出现错误

---

对于基础英语感到抱歉，希望这对您有所帮助，谢谢

有一件事：这个文件应该是.erb而不是.scss=>application.css.erb。有什么原因吗？即使将其更改为erbYep，也会出现相同的错误。“2.3.1 CSS和ERB资产管道自动评估ERB。这意味着，如果您将ERB扩展添加到CSS资产（例如，application.CSS.ERB），则CSS规则中可以使用资产路径等帮助程序：…“这是关键点”资产管道自动评估ERB。无需在此处使用ERB，erb是为了在css中使用ruby代码，他尝试使用scss预编译器来实现css“FirstRails现在只接受scss扩展”——不多。你说的是Rails 5吗？.4.2.4当然，也许是4.2，我真的不记得是什么时候实现的。使用4.2.4。请参阅——明确描述第2.3.1节。我不确定我是否做错了。我按照你的建议做了，它几乎对我有效，除了我不能使用引导图示符图标，这是我之前能够使用的。下面是

\u bootstrap-custom.scss

文件uff的要点。。。我在这里没有访问环境的权限，但是转到bootstrap\u variables\u custom，第一行应该是“$bootstrap sass asset helper:false！default”；将其更改为“$bootstrap sass asset helper:true”；如果是这样，请告诉我