Я пытаюсь добавить некоторые CSS классы в файл частичного макета, который представляет мой заголовок. Почему-то я считаю, что мой файл application.s css не применяется к приложению. html .erb. Я полагаю, что это возможно, потому что я использую stylesheet_pack_tag, а не тег ссылки, однако мне нужно использовать пакет для SASS. Я даже попытался обновить тело и добавить цвет фона, который ни на что не влиял, из-за чего я поверил, что приложение не получает файл css.
приложение. 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>
Мое приложение. 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";
Файл моего приложения.s css выглядит следующим образом:
/*
* 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';