Ruby on Rails 6 -- 使用 Webpacker 和 Bootstrap 的部分视图上没有 CSS

Question

我正在尝试将一些 CSS 类添加到部分布局文件中，该文件代表我的标题。出于某种原因，我认为我的 application.scss 文件没有应用于 application.html.erb。我相信这可能是因为我使用的是 stylesheet_pack_tag 而不是链接标签，但是，我需要将包用于 SASS。我什至尝试更新正文并添加背景颜色，但没有任何影响，让我相信应用程序没有获取 css 文件。

application.html.erb：

<!DOCTYPE html>
<html>
  <head>
    <title>ProtestPlanner</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

_primaryheader.html.erb：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#"><h3>RiseUp<i class="primary fas fa-fist-raised ml-1"></i></h3></a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

我的 application.js 文件如下所示：

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import "./custom";


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
import "../../assets/stylesheets/application.scss"
import "bootstrap";
import "@fortawesome/fontawesome-free/js/all";

我的 application.scss 文件如下所示：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 /**= require_tree .*/
 /**= require_self*/
 /**!*/
$theme-colors: (
        primary: #77D353
);

.primary {
  background-color: $primary!important;
}

body {
  background-color: red!important;
}

@import "~bootstrap";
@import '@fortawesome/fontawesome-free';

Answer 1

你已经解决了吗？如果没有，您可能需要考虑更改 SCSS 文件的相对路径。

我能够通过以下方式让 Webpacker stylesheet_pack_tag 在我的应用中工作：

• 将 application.js 存储在“/app/javascript/packs/”文件夹中
• 将 application.scss 存储在“/app/javascript/stylesheets/”文件夹中
• 在 application.js 中将我的 SCSS 文件导入为 import '../stylesheets/application.scss';（注意相对路径的结构）

由于 application.scss 文件导入是相对于 application.js 文件的位置，我只需要一级相对路径就可以让导入工作。

另外，我在 application.scss 中导入了 Bootstrap 样式：

@import '~bootstrap/scss/bootstrap';

我的 2 美分。希望有价值。