如何正确将 html 模板中的 scss 文件导入到 Rails 应用程序？答案

【问题标题】：how to import scss files from html template to rails application correctly?如何正确将 html 模板中的 scss 文件导入到 Rails 应用程序？
【发布时间】：2018-04-02 12:02:30
【问题描述】：

使用以下 - Rails 5.1.6 和 Bootstrap 4

我尝试在 html Templete(Clean Blog) 的帮助下实现 Rails 应用程序

我测试了 bootstrap 4，它已正确安装并正常工作。现在我在 assets/stylesheets/ 目录中创建了 custom.css.scss 文件

@import "bootstrap";

//partial scss files
@import "variables";
@import "mixins";
@import "global";
@import "navbar";
@import "masthead";
@import "post";
@import "contact";
@import "footer";
@import "bootstrap-overrides";

但在运行应用程序时出错

// Bootstrap overrides for this template
.btn {
  font-size: 14px;
  font-weight: 800;
  padding: 15px 25px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 0;
  @include sans-serif-font;
}

一些使用变量和 mixins 的 scss 文件。它需要像下面一样在每个文件中导入。如何让它正确？

@import "variables";
@import "mixins";

// Bootstrap overrides for this template
.btn {
  font-size: 14px;
  font-weight: 800;
  padding: 15px 25px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 0;
  @include sans-serif-font;
}

【问题讨论】：

标签： css ruby-on-rails

【解决方案1】：

问题是，简单地添加字体目录不会被管道拾取。现在，让我们在其中添加它，然后修复 Rails 问题。

|-app/
   |---assets/
       |-----fonts/
       |-----images/

修复非常简单。打开位于config/application.rb 的项目配置文件，并在应用程序类中添加以下行：

 config.assets.paths << Rails.root.join("app", "assets", "fonts")

如果已经包含字体，则不需要以上说明

** 更新 Sass 中的字体路径**

然后像这样更新

// Bootstrap overrides for this template
.btn {
  font-size: 14px;
  font-weight: 800;
  padding: 15px 25px;
  letter-spacing: 1px;
   text-transform: uppercase;
    border-radius: 0;
   //@include sans-serif-font;
    font-family: 'sans-serif-font';
}

见Using @font-face With Ruby on Rails

【讨论】：

我使用了 gem，它对字体很赞。现在我必须将变量 scss 文件导入每个部分 scss 文件以访问变量。 mixins 部分 scss 也是如此。它看起来不干净如何使它正确？