Navigating through paths of assets in Ruby on Rails

Is there a way to import multiple Javascript and CSS files into my Ruby on Rails project?

In my project, the JavaScript files are located in the /js directory and the CSS files are located in the /css directory, with numerous subfolders within each.

I've attempted to update the manifest.js file and manually add stylesheet links in the application.html.erb, but unfortunately the files are not getting included in the project.

Instead of individually specifying each file, I'd prefer to point the manifest file at specific folders. For example, if I have files in various subfolders under 

assets/css/subfolder/subfolder/subfolder
, how can this be achieved?

The same question applies for importing Javascript files as well.

javascriptcssruby-on-railsasset-pipeline

Answer №1

To include your parent directories /js and /css, use the require_tree directive.

You can achieve this with the following code:

# application.js    
//= require_tree ./js

# application.css
*= require_tree ./css

For more information, you can refer to this helpful StackOverflow post.

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

"Exploring the process of integrating a controller into an external HTML file using AngularJS

I'm relatively new to AngularJS. In my web app, I have a set of buttons: index.html <button class="aButton">a</button> <button class="bButton">b</button> <script> $(document).ready(function(){ $(".aButton"). ...

javascripthtmlangularjsiframe

What is the best way to change a dynamically centered text alignment?

Is it possible to add a transition for a center-aligned text that changes due to an action? (codepen) HTML : <div id="container">Lorem ipsum dolor sit amet consectetur adipiscing elit</div> CSS : #container { width: 400px; height: 20px ...

jqueryhtmlcssreactjs

Text Box: Add a touch of flair with resizing

One interesting feature on my webpage is a textarea that can be resized using resize:both; I am looking for a way to apply a specific style to this textarea only when the user resizes it. While I would prefer to achieve this with CSS alone, it seems like ...

jqueryhtmlcss

VueJS 3 - Issue with applying the <router-link-active> class to routes that share the same path starting name

In my navigation bar, I have created 3 links which are all declared at the root level of the router object. I've applied some simple styling to highlight the active link on the navbar using the <router-link-active> class. Everything works as exp ...

javascriptvue.jsvue-router

"Encountering a 404 error with the angular2-in-memory-web-api

Currently, I am in the process of developing a 5 minute application using Angular 2 with reference to this particular guide: https://angular.io/docs/ts/latest/tutorial/toh-pt6.html. While working on the HTTP section, I encountered a 404 error due to the a ...

javascriptangularnpmangular-cliangular2-http

Assistance needed in restructuring code to eliminate white space between Divs

I am looking to combine two divs in the header section of my website. Both divs should have a black background with no white space between them. Can anyone provide advice on this? Additionally, I would appreciate any recommendations on how to structure my ...

css

What could be causing my YAML value to be undefined when I try to read it in JavaScript, despite it being defined in every other

I have been attempting to access a YAML file from my local directory. While I am able to read the file, the data within it appears to be undefined. The error message that I am encountering is as follows: https://i.sstatic.net/yXC0H.png Here is an exampl ...

javascriptvue.jsyaml

Searching for a specific data point within the latest entry of a JSON file using Javascript

I am currently in the process of utilizing a sensor to measure temperature, which is then stored in a mongo database. This data can be accessed as a JSON file by visiting ('/data'). My goal is to determine the latest entry and extract the temper ...

javascriptarraysjsonmongodbparsing

Is there a similar alternative to {useLocation} provided by 'react-router-dom' that can be used in Next.js?

import { useLocation } from 'react-router-dom'; Currently utilizing Nextjs, I'm seeking assistance in finding an alternative for useLocation ` import Link from 'next/link'; import { FC } from 'react'; import {useRout ...

javascriptreactjsnext.js

Inline CSS alignment

While experimenting with layout inline elements, I came across some unusual behavior. Can someone please explain why there is a difference? I have applied the following CSS to both HTML structures: .time { position: relative; top:100px; heigh ...

layoutcss

The functionality of jQuery .rotate() appears to be malfunctioning

I'm struggling to get this code working properly. My jQuery version is 2.1.0. Here's the code snippet: $("a.shownav img").rotate(180); Any suggestions on how to make it function correctly without relying on a plugin? ...

jquerycssrotationcss-transforms

Ways to iterate through an array within a datatable

I have a javascript function that renders a table like this: $('#serviceTable').DataTable({ responsive: true, aaData: services, bJQueryUI: true, aoColumns: [ { mData: 'service_name&a ...

javascriptjqueryhtmldatatables

The imported `theme` as `theme` was not visible in the file './theme'. The only possible export in the file is `default`

Encountering an error while attempting to export the theme from the index.js file. Below is the snippet of code present in the index.js file. import { createTheme } from "@mui/material"; import shadows from "./shadows"; import typograph ...

javascriptreactjsmaterial-uithemes

Create 3000 unique squares using a procedural generation method

Looking to build a widget that consists of 3000 squares, but creating them manually would be extremely time-consuming. Does anyone have advice on how to efficiently generate the class .square 3000 times? Additionally, I need to have the ability to customiz ...

javascriptphpproceduredynamically-generatedauto-generate

JavaScript displays an invalid dateerror message

When I create a date like this, everything works fine: var someDate = new Date("2013,2,1");. However, I want to include time with this date as well. The following suggestion on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objec ...

javascript

What is the best way to use an object as a key to filter an array of objects in JavaScript?

My data consists of an array of objects: let allData = [ {title:"Adams",age:24,gender:"male"}, {title:"Baker",age:24,gender:"female"}, {title:"Clark",age:23,gender:"male"}, {title:"Da ...

javascriptarraysfilter

If there are no visible layers, OpenLayers will not recognize zoom scroll events

I have observed that when all OpenLayers.Layers are set to invisible, I lose the ability to zoom in and out using the mousewheel. Although I can still use the OpenLayers.Control.Zoom buttons, the mouse wheel functionality is disabled. Is there a way to de ...

javascriptopenlayers

Creating a multi-column ordered list that spans multiple pages is a great way to organize and

My goal is to showcase a numbered list in a three-column format, following the guidelines presented in this particular query. However, I am looking to maintain the continuity of the list across different pages by ensuring that the subsequent item on the ...

htmlcss

Security Concerns with AngularJS Role-Based Menu Display

Being new to MEAN.js, I am currently working on an application that has two roles - User and Admin. I need to display a menu based on the user role. Below is the header file I have created for both admin and user roles: <ul class="nav navbar-nav navbar ...

javascriptangularjsmeanjs

Feeling Icons Compilation?

Recently, I've been on the hunt for a sprite sheet that is akin to bootstrap's, but dedicated solely to emotion icons like smiley faces and sad faces. Unfortunately, my search has been fruitless so far. Does anyone happen to know of such a sprite ...

cssiconsemotion