如何正确地将scss文件从html模板导入到rails应用程序？

Question

使用以下 - Rails 5.1.6＆amp; Bootstrap 4

我尝试在html模板（Clean Blog）

的帮助下实现rails应用程序

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

＆＃13;

＆＃13;

@import "bootstrap";

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

＆＃13;

＆＃13;

＆＃13;

但在运行应用时遇到错误

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用变量和mixins的一些scss文件。它需要在每个文件中导入，如下所示。如何正确的方式？

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是，管道没有选择添加字体目录。现在，让我们在那里添加，然后再修复Rails问题。

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

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

 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