Question

我正在尝试使用gem＆＃39; bootstrap-sass＆＃39;在rails中使用bootstrap。在初始化程序中使用以下设置

下面是我的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中导入了引导文件，我仍然需要在每个文件中手动导入它们，我想在其中使用引导变量或mixins。例如在_footer.css.scss中我试图使用变量$gray-lighter或扩展.thumbnail类并收到错误

Undefined variable: "$gray-lighter".

我添加@import＆＃34; bootstrap-variables-custom＆＃34;;在这个文件的顶部，错误消失了。

我尝试更改application.css，如下所示，同时从common.css中删除前两个导入，但它没有工作：

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

更新： - 我的当前结构如下，使用这种结构，我不必在common.css中包含的每个文件中包含bootstrap-custom，但是在taxons_show.css等所有其他文件中都需要它。我尝试将此bootstrap-custom导入移动到application.css，但它没有工作：

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;
    }
  }
}

Answer 1

您好我会为您的项目设置一个示例组织，然后尝试解释为什么我做了所做的每一项更改，同时我也会假设您正在使用最新版本的rails，某些更改可能在以前的版本中不起作用，所以......

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

第一个rails现在只接受scss扩展，同样适用于咖啡，所以我们将使用这种表示法，很重要，因为我们需要使用导入而不是需求，需要的是我相信的css，使用来自scss的导入会知道它需要预先将这些文件渲染为css，例如，如果你使用变量文件然后需要另一个bootstrap文件，在内部你将有一个变量的css汇编和一个bootstrap文件的css编译，那些会有沟通，据说这个符号说通过预先命名你的文件＆＃34; _＆＃34;它应该知道那些是文件片段，所以理论上你可以将它们作为scss文件导入并在之前编译它，但是从我上一个项目中我遇到了麻烦，只能从1 lvl做到，这意味着我可以从子文件中调用一个文件，你跟着我吗？希望如此...... 所以我通常去导入我的bootstrap-custom顶部，在那个位置，因为bootstrap相当大，很多次它会覆盖我现在使用的另一个库。

接下来我们的bootstrap-custom文件

@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;
    }
}

好的，sprockets，总是排在第一位，是所有基本的依赖项，然后我个人喜欢有一个bootstrap-variables的副本，并且我可以从这里修改我的自定义，其中许多工作结合在一起所以你将如果你从这里开始免费修改，我认为更清楚，然后我需要作为下面的scss代码进行任何更改，你需要记住，变量的任何变化都适用于下一个导入，＆＃34; bootstrap＆＃34;，这些就像是|| =赋值，这意味着如果在它们采用默认值之前没有给出值，那么在引导之前导入它们。

通常引导程序的问题是同一文件的多次导入或scss的预编译部分的导入，不会在文件之间产生交互，想想女巫文件应该是scss而女巫应该是css（通常是预编译库的文件）

最后

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

这个地方适用于您的应用程序文件之外的文件，因此，由于您使用* = require_self，您不需要再次导入，您可以随时使用其他文件，但这是另一个文件历史，所以你应该添加像png，gif，字体等文件，或those * .png的一般化，但如果你的文件结构正确，rails应该让你知道你需要的文件，如果你看到太多那边可能有一个错误。

抱歉基本的英语，希望这有帮助，尊重！

重复引导导入资产

1 个答案: