重复 bootstrap 资产导入

Question

我正在尝试在 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 中导入了 bootstrap 文件，我仍然必须在每个文件中手动导入它们，我想在其中使用 bootstrap 变量或混入。例如在 _footer.css.scss 中，我尝试使用变量 $gray-lighter 或扩展 .thumbnail class 并收到错误消息

Undefined variable: "$gray-lighter".

只要我添加行@import "bootstrap-variables-custom";在这个文件之上，错误消失了。

我尝试按如下方式更改 application.css，同时从 common.css 中删除前两个导入，但它不起作用：

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

更新：- 我当前的结构如下，有了这个结构，我不必在 common.css 中包含的每个文件中包含 bootstrap-custom，而是在每个其他文件中包含 bootstrap-custom，例如 taxons_show.css 这是必需的。我尝试将此 bootstrap-自定义导入移动到 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

您好，我将为您的项目提供一个组织示例，然后尝试解释为什么我做了我所做的每一项更改，同时我假设您正在处理 [=44= 的最新版本], 一些改动在以前的版本中可能不起作用，所以...

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

首先 rails 现在只接受 scss 扩展，咖啡也是如此，所以我们要使用这个符号，这很重要，因为我们需要使用导入而不是要求，要求是一个css 我相信，从 scss 导入的东西会知道它需要将这些文件预渲染到 css，例如，如果您使用一个变量文件然后需要另一个bootstrap 文件，在内部你将有一个 css 变量编译和一个 css 编译 bootstrap 文件，两者都不会有通信，据说该符号表示通过使用“_”预先命名您的文件，它应该知道那些是文件的片段，所以理论上您可以将它们导入为 scss 文件并在之前编译它，但是从我的上一个项目中我有这有问题，只能从 1 级开始，这意味着我可以从子文件调用文件，你跟着我吗？希望如此...... 所以我通常会在顶部导入我的 bootstrap-custom，在那个位置，因为 bootstrap 非常大，很多时候它会覆盖我目前正在使用的另一个库。

接下来我们的 bootstrap-自定义文件

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

好的，链轮，总是排在第一位，是所有基本依赖项，然后我个人喜欢拥有一份 bootstrap-variables 并从这里尽可能多地修改我的自定义，其中很多一起工作，所以如果你从这里开始，你将有很多免费的修改，而且我认为更清楚，然后我需要的任何更改作为下面的 scss 代码，你需要记住任何变量的更改将与下一次导入 "bootstrap" 一起使用，这些类似于 ||= 赋值，这意味着如果在它们将采用默认值之前没有给出值，因此在 bootstrap 之前导入那些。 =13=]

通常 bootstrap 的问题是同一文件的多次导入或 scss 的预编译片段的导入导致文件之间没有交互，考虑文件应该是scss和应该是css（一般是预编译库文件）

终于

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

此位置用于存放应用程序文件之外的文件，因此由于您使用的是 *=require_self，因此无需再次导入，您始终可以使用其他文件，但那是另一回事历史，所以你应该添加像 png、gif、字体等文件，或者那些 *.png 的概括，但是如果你的文件结构正确，rails 应该让你知道确切的文件你需要，如果你看到太多，可能是那里有错误。

抱歉英语基础不好，希望对您有所帮助，问候！

重复 bootstrap 资产导入

Repeated bootstrap imports in assets

sass

asset-pipeline

twitter-bootstrap

bootstrap-sass

ruby-on-rails-4