What is causing the lack of impact from comments on application.css.scss and application.js in Rails?

Recently, I've been experiencing a strange issue with the way application.js is utilized in Rails. My code looks like this:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
//= require underscore
//= require gmaps/google

Additionally, my application.css.scss file is structured as follows:

/*

 * 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, vendor/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 styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

I originally assumed that // indicates a comment in JS files, while /* */ signifies comments in CSS files. However, I am now realizing that comments in both JS and CSS files seem to have no effect when used in Rails. Can anyone shed some light on why this might be happening?

Answer №1

A common misconception is that both // and /* */ are comments for js and css files, respectively. However, it's important to note that //= and *= actually serve as directives utilized by sprockets, as outlined in the documentation:

The DirectiveProcessor plays a critical role in interpreting and executing directive comments found within source files.

A directive comment typically starts with a comment prefix, followed by an "=" sign, then the directive name, and finally any accompanying arguments.

// JavaScript
//= require "foo"

# CoffeeScript
#= require "bar"

/* CSS
 *= require "baz"
 */

In essence, while js or .css files may recognize //= and *= as comments, it is sprockets that identifies these directives in order to load the specified files into the rails asset pipeline.

For further insights, refer to the sprockets guides for comprehensive details.

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

Trouble with importing scss file in sass and bootstrap collaboration

I am using Sass with Bootstrap 4, and now I'm facing an issue in my Sass folder where I have an app.scss file that includes: @import _customVariables.scss @import node_modules/bootstrap/scss/functions @import node_modules/bootstrap/scss/mixins Howev ...

Integrate UploadFS functionality into angular2-meteor

Currently, I am in need of a file storage database and after some research, it appears that UploadFS is the most suitable option for my project. My development involves Angular2 typescript and Meteor. meteor add jalik:ufs-gridfs However, I am encounterin ...

Highlighting n-grams in a contenteditable div

My query does not pertain to extracting n-grams, but rather focuses on highlighting 1/2/3/4 grams within a content editable div. I have a div with some text in it. The n-grams are retrieved from the backend and should be highlighted within the div. I am a ...

Using the jQuery .each() method to generate an array of objects

I have a goal of creating something similar to this. var data = google.visualization.arrayToDataTable([ ['Year', 'Cost'], ['2004', 1000], ['2005', 1170], ['2006', 660], ['2007&a ...

Troubleshooting FabricJS: Object manipulation is disabled until a common selection is made

I am currently in the process of developing a product configurator with Vue and FabricJS. To set up my canvas, I used this.canvas = new fabric.Canvas("canvas"); <template> <div id="wrapper"> <div id="left"></div> &l ...

Enhancing the building matrix with JavaScript (or jQuery)

I have created a custom Javascript function for extracting specific data from a matrix. The main purpose of the function is to retrieve data based on dates within a given range. Here's how it works: The matrix[0][i] stores date values I need to extr ...

Switching classes in real time with JavaScript

I'm struggling to understand how to toggle a class based on the anchor text that is clicked. <div> <a id="Menu1" href="#">Menu</a> <div id="subMenu1" class="subLevel"> <p>stuff</p> </div> <div> <a i ...

Create partial form copies dynamically based on user selections within a nested form

Attempting to design a form that dynamically generates copies of a nested form based on user input. Three models are involved: Visualizations, Rows, and Panes. The goal is to enable users to select from a dropdown menu, create a row, and choose 1, 2, or 3 ...

Transforming Ember's ajax query string

Using ember-model, I am making a request like this: App.Video.find({'sort':'createdAt+asc'}); to retrieve a sorted list of videos. This should result in the following request: http://localhost:1337/api/v1/videos?sort=createdAt+asc How ...

Sass is throwing an error message saying 'Module not found' during the compilation process

After installing sass using npm ($npm install sass), I attempted to create a JSON script. Unfortunately, when running it, I encountered an error stating 'Cannot find module'. ...

Using form.submit() alongside preventDefault() will not yield the desired outcome

My login form needs to either close the lightbox or update the error box based on the success of the login attempt. I suspect the issue lies with the onclick="formhash(this.form, this.form.password);" which is a JavaScript function that hashes a passwor ...

I need help with formatting a div to look like this

Looking to simplify my page by reducing the number of divs, wondering if this "tile" could be achieved without using one. Here's the example I have in mind: <a href="mks.html" class="big-tile big-tile-1"> <h1>town<br> libra ...

What might be causing the issue with installing the react/icons package?

Encountering an error while trying to install the react/icons NPM package on Windows, even with the latest versions of NodeJS and NPM installed. The specific error message indicates a permission denied issue when accessing the repository. npm ERR! code 1 ...

Tips for efficiently managing imports in a React application that utilizes three.js without relying on the window object

Issue: Imagine I am working on a React application that includes a 3D component on one side and various UI components on the other side. The 3D aspect of the project involves using three.js, and for reference, let's say I want to replicate this part ...

Update the Material UI input field value using an external JavaScript script

Imagine I find myself exploring an online form that utilizes Material UI components, for instance, this example link. I am interested in automatically filling the input fields with a specific value using JavaScript in the console: for (input of document.g ...

Guide to setting up and launching a JavaScript/Vue GitHub repository on your local machine

I have a cloned app located here: cvss-v4-calculator that I want to run locally for debugging with VS Code or a similar tool. However, I'm encountering difficulties in setting it up. I've been attempting to run this as a web page using node.js, b ...

Choosing the Right Project for Developing HTML/Javascript Applications in Eclipse

Whenever I attempt to build a webpage using eclipse, I am presented with two choices: -- A Javascript project -- A Static web project If I opt for the former, setting up run to open a web browser can be quite challenging. If I decide on the latter ...

Transform a String into an Array object

There is a string that resembles the following pattern: var stringArray = "[[1,2,3,4],[5,6,7,8]]" The objective is to use Javascript to convert it to the following format: var actualArray = [[1,2,3,4],[5,6,7,8]] What would be the method to accomplish ...

What is the best way to preserve text input value when going back a page in PHP?

Is there a way to keep the text box value entered by the user even after navigating away from the page? Below is an example of what I am trying to achieve in my code: **main.php** <html> <head></head> <body> <i ...

Semantic UI form validation is initiated by clicking any button

Within my Semantic UI form (<div class="ui form">), it seems that every button is triggering the form validation, even if it's not a submit button. I have two different types of buttons below: <button class="ui blue right labeled icon prima ...