[英]Ruby on Rails 6 -- No CSS on Partial View with Webpacker & Bootstrap
我正在尝试将一些 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';
你已经解决了这个问题吗? 如果没有,您可能需要考虑更改 SCSS 文件的相对路径。
我能够通过以下方式让 Webpacker stylesheet_pack_tag在我的应用程序中工作:
import '../stylesheets/application.scss';
(注意相对路径的结构)由于 application.scss 文件导入与 application.js 文件的位置相关,因此我只需要一级相对路径即可使导入工作。
另外,我在 application.scss 中导入了 Bootstrap 样式:
@import '~bootstrap/scss/bootstrap';
我的 2 美分。 希望有价值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.