Rails question: What is the best method to link a stylesheet to a layout?

I have implemented a controller in my application that utilizes a custom layout named "special":

class SessionsController < ApplicationController
  layout "special"
  ...
end

To complement this, I have created a new layouts/special.html.erb file:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <%= stylesheet_link_tag "special" %>
  <%= csrf_meta_tags %>
</head>
<body>
 <%= yield %>
</body>
</html>

In addition, I have also generated a corresponding stylesheets/special.css file.

The issue arises when attempting to access the page with the "special" layout, resulting in an exception being thrown:

Sprockets::Helpers::RailsHelper::AssetPaths::AssetNotPrecompiledError in Sessions#new

special.css isn't precompiled

Despite running

bundle exec rake assets:precompile
, the problem persists. What could be causing this issue? How can I correctly link a stylesheet to a layout in Rails?

Answer №1

By default, Rails only precompiles your application.css and application.js files (or their .scss, .less or .coffee equivalents).

To include an additional file in the precompilation process, you need to add it to the precompile array in your

config/environments/production.rb
file, as shown below:

config.assets.precompile += %w( special.css )

For more information, refer to: http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets

Answer №2

Instead of duplicating configuration setup in each environment, the recommended approach is to include precompiled assets in config/initializers/assets.rb, as stated in the documentation. By creating this file and specifying the fully qualified config attribute, such as:

Rails.application.config.assets.precompile += %w( custom.css )

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to retrieve the CSS class names associated with an element

To determine if an element has been selected, I rely on checking for the presence of an additional CSS class called "selected" that is added to the element The structure of my element is as follows: <div class="b-wide-option" data-bind="css: { selecte ...

Foundation framework enables the creation of a full width footer that stands out

I'm having trouble getting my footer panel to stretch across the entire page, it seems stuck in the center. The header at the top of the page spans the full width just fine. Am I missing something? My goal is to make both panels at the bottom of the p ...

Design a responsive layout featuring a div containing four buttons that incorporate text and logos using Bootstrap 5

Looking for help with a web application built using HTML/CSS/Bootstrap 5/JS and Rust/Actix-web? Check out the code here. The index page of the app features a navbar and a div containing four buttons in the center (vertically and horizontally aligned). The ...

Issue with Bootstrap 4.x tooltip positioning within an overflowing container

In the world of bootstap 4.x, a tooltip finds itself in a bit of a pickle when nestled within a parent element sporting an overflow property. Whether it's overflow: auto; or overflow: scroll;, the poor tooltip just can't seem to find its place. T ...

The image is not properly aligned with the background image

I'm currently working on a page design using bootstrap and css where I want images to fade and reveal the background when hovered over. The challenge I'm facing is that although all images are set to 100px in size, there is white space visible ar ...

Script to Trigger Download Button

I'm having trouble with a rar file download on my website (ravens-hangar.tk). A bunch of lines of script keep popping up. Can anyone help me out? Thanks in advance! .download { width: 120px; height: 30px; font-size: 20px; text-align: center ...

LESS keyframe mixing is a powerful feature that allows for easy

After extensive searching, I have yet to find a mixin that can create prefixed keyframes declarations without requiring messy fixes. In my quest, I have crafted the following mixin: .keyframes(@identifier, @animation) { .frames { content: ~"'&apo ...

How can I extract the page's output using JQuery?

Being a rookie in this area, I am eager to learn how to extract specific content from a page using AJAX in JQuery. Currently, I have been able to fetch the data of a page and display it as text: $.ajax({ type: "POST", url: "myfile.html", su ...

Disable the div by graying it out when the button is clicked

In my jsni form, I have implemented a click handler on the save button. When the save button is clicked, I would like the specific div to be greyed out to indicate that data is being saved. var x=$doc.createElement("div"); x.id="nn"; var lbl=$doc.createEl ...

Is there a way to lock the eye icon in place within the password field using Vue.js?

I added an eye icon to the right side of my password input fields. However, occasionally error messages may pop up on the page to signify issues with the input fields. When these error messages appear below the relevant input field, the position of the eye ...

What is the best way to implement word-wrap on ANTD Select's title and dropdown options in order to adjust the element's height?

I need my ANTD title/selected item to be on a separate row and adjust the height of the Select component. Here is the example I have been working on: https://codesandbox.io/s/basic-usage-antd-4-24-7-forked-8jzp29?file=/demo.js These are the specific styl ...

Discover the secret to halting a CSS animation precisely on the final nth-child in CSS3

I have encountered some difficulty in stopping a crossfade animation on the last nth-child element. Although I am aware of using animation-fill-mode: forwards, implementing it in different places such as in the initial .crossfade declaration did not yield ...

What could be causing my scrollable div to not function properly within a Bootstrap modal?

I am facing a frustrating issue. I have a simple DIV element that I want to make scrollable, containing a table inside it. The process should be straightforward as I have a separate .html file with the code that functions correctly. Here is an excerpt of ...

Tips for arranging the items in a dropdown menu side by side

As I work on creating a multi-level navbar using CSS and HTML, I am facing a challenge. I want to structure a drop-down ul-list with multiple columns side by side rather than in a single long column as is traditional. I have tried using the display: flex; ...

Transform Table header orientation to vertical

I am struggling with a table structure similar to this <table> <thead> <tr> <th>Numbers</th> <th>Alphabet</th> </tr> </thead> <tbody> & ...

What is the method to display my input value within my application interface rather than triggering an alert popup?

Hi there, I am seeking assistance with my GUI code. I want the input value to be displayed as text on the screen, or even better, to look like a chatroom so that I can integrate a simple chatbot later on. My main goal is to have the texts show up in the bl ...

I'm attempting to adjust the line spacing and text size with CSS, but I'm having trouble getting it to work

Having some trouble adjusting line height and font size with CSS Below is the HTML code: <h2>I've finally stopped searching for love by sniffing other dogs. I found the most attractive Corgi on TinDog. Woof.</h2> CSS code: h2{ font-fam ...

Display a single div and conceal the rest upon clicking a link

Trying to find a way to hide all other divs when clicking on a navbar link to toggle them. Currently, the divs stay active when a new link is clicked. The goal is for them to slide up and the clicked one to slide down. <script type="text/javascript> ...

The div element should stretch to occupy the entire height of the screen

I have structured my webpage with three different divs. The left one is defined with col-md-2, the middle one with col-md-8, and the remaining right div with col-md-2. I want the right div to take up 100% of the screen height, even when no controls are pre ...

Looking for some CSS to style the image below

Looking for CSS assistance to style the sample image provided below. The letter within the circular element is contained in a div while the subscript Z is represented by an image of a circle. https://i.sstatic.net/sKF1H.png .text-center { text-align: ...