Yeoman webapp error: Issue with incorrect CSS path in subfolder

I have been using the yeoman webapp generator (0.5.0) and my app directory is structured like this:

app/
├── dir1
│   └── index.html
├── favicon.ico
├── images
├── index.html
├── robots.txt
├── scripts
│   └── main.js
└── styles
    └── main.css

In dir1/index.html, I have copied the content of app/index.html and modified the paths of css and js files. For example, changing from

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">

to

<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="../styles/main.css">

When using grunt serve, everything works fine. However, after building with grunt build, the paths in dir1/index.html are incorrect. Errors are showing up in the chrome developer console:

GET http://127.0.0.1/webapp/dir1/styles/9c307a9d.vendor.css        127.0.0.1/:1
GET http://127.0.0.1/webapp/dir1/scripts/b6c3df09.main.js             (index):8

The correct paths should be:

http://127.0.0.1/webapp/styles/9c307a9d.vendor.css
http://127.0.0.1/webapp/scripts/cb7562c6.plugins.js

This issue arises because a grunt task is using dir1 as the root directory instead of the parent directory.

How can I resolve this?

htmlcssweb-applicationsgruntjsyeoman

Answer №1

After some investigation, I managed to resolve this issue by making a simple tweak. Within the file dir1/index.html, I not only adjusted the relative paths of external files (such as css and js), but also updated the grunt block. An example of the code snippet that required modification is as follows: 

<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

The corrected version should look like this:

<!-- build:css(.) ../styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) ../styles/main.css -->
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->

Answer №2

Switch to using site-relative URLs instead of path-relative

 <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
 <link rel="stylesheet" href="/styles/main.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

ng-class not functioning properly when invoked

In my controller, I have the following function: $scope.menus = {}; $http.get('web/core/components/home/nav.json').success(function (data) { $scope.menus = data; $scope.validaMenu(); }).error(function () { console.log('ERRO') }); ...

javascripthtmlcssangularjsng-class

The horizontal navigation bar will not extend the entire length of the page

I'm facing an issue with my horizontal navigation bar as it doesn't span the entire screen. I need help figuring out how to make it full-width. You can see what I mean here. Additionally, once the navigation bar spans the screen, I want the image ...

htmlcss

Creating identical height columns with uniform inner elements is a problem that needs to be solved with caution. The proposed solution

Issue: I need to create a responsive layout with 5 columns, each containing an image, title, and text. The goal is to align the images separately, titles together, and texts individually while ensuring that all elements in a row have the same height. Solu ...

javascripthtmljquerycssbootstrap-4

Guide on transferring the td id value to a different page

document.getElementById('scdiv').innerHTML=Quantity <td id="scdiv"> </td> document.getElementById('quantitydiv').innerHTML=mrp <td id="quantitydiv"> </td> I am currently facing an issue where the code is being d ...

javascriptphpjquerycssajax

Header misalignment occurs when the user scrolls up too quickly causing it to display

One interesting feature on my website is that the header disappears as users scroll down the page, but reappears when they start scrolling back up, even if they are halfway down. However, if a user quickly scrolls up and down, there seems to be an issue wi ...

javascriptjqueryhtmlcss

The CSS @media query is failing to function properly

I'm currently developing a web application similar to Spotify for my personal use, but I'm running into some issues with the @media query as it doesn't seem to be working correctly. Here is the CSS code: /* Screen Adapting */ @media (height ...

htmlcssweb-applicationsmedia-queries

Angular JS Profile Grid: Discover the power of Angular JS

I came across an interesting example that caught my attention: http://www.bootply.com/fzLrwL73pd This particular example utilizes the randomUser API to generate random user data and images. I would like to create something similar, but with manually ente ...

javascripthtmlarraysangularjstwitter-bootstrap-3

Is it possible for .php files that don't contain any PHP code to be sent to the interpreter?

Does the PHP interpreter process .php files on a standard LAMP stack even if they do not contain any PHP code? In essence, is there any performance or processing impact in having a .php file without any actual PHP code compared to simply making it an .htm ...

phphtmlperformance

Is it possible to trigger a JavaScript function and an AJAX command with just one button click?

I'm looking to achieve a specific functionality using one button within a form. The requirements are as follows: 1) When the button is clicked, it should trigger a JavaScript function that performs animations such as fadeout and fadein. 2) Following ...

javascripthtmlajaxjsfxhtml

Steps for Deactivating HTML Links

I am facing an issue with a link button inside a <td> that needs to be disabled. It is working fine on Internet Explorer but not functioning properly in Firefox and Chrome. I have tried various methods, but nothing seems to work on Firefox (using ve ...

javascriptjqueryhtmlcss

How can we toggle a function to expand or collapse fields generated in an ngFor loop?

One of my challenges involves managing a div that is repeated using *ngFor in Angular. This results in multiple divs on the page, each containing collapsible fields that can toggle. Essentially, I have nested collapsible fields within other collapsible fie ...

javascriptjqueryhtmlangular

Steps for aligning a grid column to the same height as the element above it and moving it to the left side

I have a setup using material UI where I have a grid positioned on top of a Paper element. Within the grid, there is a text input field in the first column that I want to match the height of the paper element and be aligned with its left border. I have tri ...

cssreactjsmaterial-ui

Troubleshooting: Absence of Link Style in Lotus Notes 8.5 Email Client

While creating an HTML email and testing it with Litmus, I noticed that Lotus Notes 8.5 is not showing any link styles. Despite using traditional methods to ensure compatibility with older mail clients, the links are still not displaying correctly in Lotus ...

htmlcssemailhtml-email

Is there a way to add a gradient of colors to the background?

I'm looking for instructions on how to achieve a multi-color background screen similar to the image I have provided. Can anyone help with this? ...

css

Running a <script> tag with an external src attribute in a dynamic manner through the use of eval

Currently, I am utilizing the Genius API to fetch lyrics for a particular song and then embed them within an HTML <div> tag. My interaction with this API is through PHP, employing an AJAX GET request. Upon a successful AJAX request, the following HT ...

javascriptphpjqueryhtmlajax

Position the final offspring adjacent to the one that came before it using Flexbox

I am trying to figure out how to position the last child (CVV) next to the previous one (Expiry), so they are on the same row: .form-col-1--cc { display: flex; flex: 30%; flex-direction: column; text-align: right; align-items: flex-end; } < ...

htmlcssflexbox

My Ajax script is not recognizing the select tag value?

I am struggling with an ajax script that is supposed to send data from a contact form to a PHP script. The main issue I'm facing is that I can't seem to retrieve the value from the "select" tag. My knowledge of JavaScript/ajax is limited, so plea ...

javascriptphphtmlajax

Guide to creating a continuous loop for CSS3 animation

I'm looking to create a setup that can play on repeat, but I'm not very familiar with jQuery. Can anyone lend a hand with this? Check out the DEMO here $('.title1').fadeIn('fast', function() { $('div').addClass ...

jqueryhtmlcssloops

Explore relevant Pill information dynamically based on the image that was clicked in Angular

In this particular situation: Using Angular 1.7.2 Utilizing Bootstrap 3 Encountering some challenges after the user interacts with the image: Current Behavior: Upon clicking any image, a modal window appears displaying relevant content. If image 1 is ...

htmlangularjstwitter-bootstrap-3

Choosing a BeautifulSoup tag according to attribute value

Imagine we have an HTML page with an index and some content below. Each element in the index is linked to a related section in the document. Let's say our starting point is an anchor tag with an href value of "#001". We want to search through all the ...

pythonhtmlbeautifulsoup