The CSS file stubbornly refuses to connect, opting instead to redirect back to the HTML file

Something strange has occurred. I was working on a React app and everything was functioning properly until today when I returned to it, and my CSS file wasn't linking for some reason. The only actions I took were running npm run build and npm run deploy.

In my HTML file, I have the following line of code: 

<link rel="stylesheet" href="styles.css" type="text/css">

Yes, the name of my CSS file is spelled correctly, and yes, it is in the same directory and level as my index.html file. However, it is not being utilized. To further test this, I added a CSS <script> tag to my head, but it also didn't work. Interestingly, the Bootstrap that I'm using through a CDN is working fine.

I copied the same code into a JSFiddle, and it worked there, so it doesn't seem to be an issue with the code itself.

When I inspect dev tools, I noticed something peculiar:

https://i.stack.imgur.com/s9s3s.png

The styles.css file seems to be linking back to the index.html file

I tried pressing CTRL+SHIFT+R and clearing my Chrome cache, but I'm still puzzled and would appreciate any assistance.

EDIT: When opening the file from the path directly, the CSS file does serve correctly, as shown in the image below. https://i.stack.imgur.com/rb4r3.png

EDIT: It's worth mentioning that I tinkered with using gulp to package this project into a single HTML file. I followed this tutorial exactly: . When it didn't work, I uninstalled all the gulp modules by using npm uninstall.

htmlcssreactjshyperlink

Answer №1

Your question is a bit unclear to me, but if you are using reactjs, make sure to include the public URL in order to properly link to the file:

<link rel="stylesheet" href="%PUBLIC_URL%/styles.css">

It's important to note that I did not include ?v=1. Avoid adding this during development as it may cause caching issues and prevent updated css from loading.

Answer №2

To import in JS, try using import './styles.css'

You could also consider relocating the directory.

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

What is the best way to set the theme for Material-UI in a React application?

I find myself puzzled when it comes to styling a front-end based on Material-UI. Can someone clarify where the theme originates from in the following example code and what impact the theme has? import React from "react"; import Container from "@material- ...

javascriptreactjsstylesmaterial-ui

Can you explain the functionality of the "use client" directive in Next.js 13?

My mind is grappling with the concept of server-side rendering using Next.js 13.4 and the new app/ directory. As I understand it, every component is automatically a server component (rendered server-side). However, we have the option to use the 'use ...

reactjsnext.js

Strategies for avoiding a hover component from causing distortion to its parent component in React

I am encountering an issue with a hover component that is causing distortion in its parent component when displayed. Essentially, I need to prevent the hover component from affecting the layout of its container. Below is the code snippet: Styling for Lang ...

javascriptcssreactjscomponents

Utilizing Redux in Conjunction with the useEffect Hook

I have come across a situation where mixing certain technologies has resulted in double re-rendering in my small use case. I read that theoretically it should be okay, but I'm facing issues. The problem occurs when redux dispatch is executed and some ...

reactjsreact-redux

Why won't the div move when I click it?

Could you please explain why my JavaScript code isn't functioning as expected? The intended behavior is for the 'mark' div to move to the current mouse coordinates upon clicking within the map. ...

javascripthtmlcss

Why does the <div> element still have an offset even though its width and height are set to 100px and padding, margin, and border are set to 0px?

After styling my div element with specific CSS rules, I'm encountering an issue. The div has a set width and height of 100px along with padding, border, and margin all set to 0px. However, the elements are not being offset from the edges of the browse ...

javascriptjqueryhtmlcss

Is there a way for me to showcase a collection of pictures in an array format

I am facing an issue on my react page where the data is successfully fetched from an API, but I am having trouble fetching the array of images. Below is the code snippet that I have written: import React, {Component} from 'react'; export defaul ...

javascriptajaxreactjs

Error: The reselection failed because the selector creators require all input selectors to be in the form of functions

I am in the process of incorporating reselect into my component: const test = useSelector(({ test }) => test); const testData = createSelector( test, items => console.log(items), ); I encountered an issue with Error: Selector creators ...

reactjsreduxreselect

Issue with switching button and content positioned absolutely

Within this container, I have some content followed by a slide toggle button and then more content. The toggle button utilizes the jQuery function slideToggle. All elements within are positioned absolutely. [Introduction Content] Toggle Button [Hidden C ...

jqueryhtml

Updating a user in a state array using ReactJS

I have a list of USERS stored in STATE, { "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\nsus ...

reactjsstate

Utilizing JavaScript to arrange the dots around the circle proves to be glitchy

I am having trouble positioning dots around a circle. The top and bottom points are not aligning properly, resulting in a buggy display. What could be causing this issue? How can I fix this problem? $(function(){ var globe = $('#center') ...

jqueryhtmlcss

Finding the element and extracting its text value

Below is the HTML code: <span> <b>Order number:</b> </span> <span>A36HASJH</span> The value within the span element, A36HASJH, is dynamic and changes with each order. How can I identify this element and store it as a s ...

javahtmlseleniumxpathselenium-webdriver

`Enhancing the appearance of code in PHP`

I'm struggling with customizing the data pulled from the database. Can anyone provide assistance? I attempted to define $style within the while loop and assign it to $questions, but nothing is displaying on the webpage. While I have some familiarity w ...

phphtmlmysqlcssstyles

Encountering an issue while trying to add a search feature. The error message reads: "Failed to cast value 'search' to ObjectId (type string) at path '_id' for model 'Post'."

Hello everyone! I am quite new to web development and have been following a MERN project tutorial on YouTube. I am currently working on implementing a search functionality for posts. These posts are stored in MongoDB. However, when I try to insert a title ...

node.jsreactjsmongodbmongooseaxios

Achieving 100% height with Flexbox in CSS

In my layout, I have a column on the right with <IndustryList />, and I want everything in the other <div> that contains <ParameterAndPostSearch /> and <SocialPostList /> to extend to the bottom. However, no matter what I try, setti ...

cssreactjsflexbox

Making an Axios request within a React Native application

I am struggling to understand the meaning of these errors. Below is the code for my component: import React, { Component } from 'react'; import { Text, View } from 'react-native'; import axios from 'axios'; class AlbumList ...

ajaxreactjsreact-nativeaxios

The SVG image does not display in browsers other than Internet Explorer (IE)

I am encountering an issue with adding a menu toggle image in SVG format to my HTML. Unfortunately, the image is not displaying as expected. Here are screenshots for comparison between Explorer and Chrome: https://i.stack.imgur.com/74sqh.png https://i. ...

javascripthtmlcsssvg

Creating distinctive ng-form tags within a form using ng-repeat in Angular

I need help with creating a form that includes a table looping over a list of objects. Each object should have checkboxes for the user to check/uncheck attributes. The issue I am facing is setting the ng-model attribute on the checkboxes. This is what my ...

javascripthtmlangularjsangularjs-ng-repeat

Discovering the dimensions of a disabled attribute within a table using XPath in Selenium with Java

I'm attempting to determine the number of columns in a specific table, but some are disabled - I'd like to know if it's possible to get the count without including the disabled ones (only counting the visible columns). As you can see in the ...

javahtmlcssseleniumxpath

How do I create individual tables for each JSON array within my object using React and MaterialUI?

I have a unique challenge with a component that creates multiple tables, all within one <TableContainer>. The issue lies in the fact that every table is confined within the same container and I am unable to customize each table separately. Each tabl ...

javascriptreactjsmaterial-ui