Issue with loading CSS file in React JS

https://i.sstatic.net/GSX2z.png

This is how the contents of my folder appear.

<html lang="en">
    <head>
        <meta charset="UTF-8>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible">
        <link rel="stylesheet" href="../src/App.css">
        <title>Document</title>
    </head>

    <body>
        <div id="practice"></div>
        <div id="farm"></div>

    </body>
</html>

Despite having the correct path in the HTML code provided above, React does not recognize it and fails to load the CSS file. It seems that no matter what I try, the issue persists.

https://i.sstatic.net/P9BNa.gif

I can access the file by clicking CTRL + LMB in VSC as shown in the GIF above. Upon changing the path to ./src/App.css, VSC was unable to locate it due to an incorrect path.

Why does this problem continue to occur and are there any solutions you could suggest to resolve it?

Thank you for your attention.

htmlcssreactjsnpmvisual-studio-code

Answer №1

Make sure to properly import your CSS files in app.js or any other JS file located in your src folder, rather than calling it from the public folder. Check the app.js file for examples, especially if you are using create-react-app. It seems like you may be doing it incorrectly.

If you still want to use the public folder, have you tried adding %PUBLIC_URL%/src/App.css ?

import '../src/App.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

Implementing a feature in Typescript/React component that provides autocomplete functionality

Currently, I have developed a TypeScript and React component that has been published on NPM. My goal is to enable IntelliSense to autocomplete React props for this component. While I typically use JSDoc for plain React components, it does not seem to work ...

reactjstypescriptvisual-studio-code

The React hook useState is struggling to accurately map array objects

Recently, I encountered an issue with a form that sends an array of objects to another React Functional Component: import React, { useState } from 'react' import uuid from 'uuid/v1'; const NewMovieForm = ( {addMovie }) => ...

reactjstypescriptreact-hooks

Struggling to add an event listener to the window object in Next.js

Why am I unable to attach an event listener to the window object in nextjs? When attempting to use the 'resize' event, everything functions correctly. However, when trying to utilize the 'load' event, it appears that the event is not be ...

javascriptreactjsnext.js

What are some ways to showcase HTML/CSS content within an email?

For my service to be used, an activation process is necessary before the account can be accessed. The challenge we are facing is that the CSS styling we added to the activation email template is not showing up when the email is sent. Only the HTML content ...

phphtmlcssemailphpmailer

Seeking guidance on how to effectively utilize the React JSX Highcharts documentation

Considering implementing React JSX Highcharts for a new project, but hesitant due to lack of prior experience with Highcharts. Trying to find comprehensive documentation on available parameters to customize the charts but coming up empty-handed. Any sugg ...

npm

How can I shift focus to the next control in react select within material-ui with just a single tab press?

By default in material-ui react-select, when an option is selected by tab or enter, the user needs to press tab twice to move focus to the next element. For a demo, please visit the following link: https://codesandbox.io/s/8xy53m60m2 To reproduce the is ...

reactjsmaterial-uireact-select

Generating React Components Dynamically using TypeScript

Attempting to generate an element in React using Typescript based on the given tagName passed as props, along with additional relative element properties depending on that particular tagName. Take a look at the code snippet below: type ElementProps<Tag ...

reactjstypescript

Stretching the height of a table without altering the position of its contents

While working on a project using Angular and Angular Material, I have realized that the solution might actually lie in pure CSS. The issue I'm facing is with a table that currently has only 2 or 3 rows. I want this table to have a fixed height of 700 ...

cssangular-material

Reading values from a properties file using HTML

Here's a snippet of my HTML code: First name: <input type = "text" > Last name: <input type = "text"> Instead of manually inputting the field values (First name, Last name) in the HTML, I am interested in reading them ...

javascripthtml

Error: The module you are trying to import from the package is not found. Please check the package path and make sure that

I encountered an issue when trying to compile a code in Reactjs. As a beginner in Reactjs, I'm struggling with this. Module not found: Error: Package path ./cjs/react.development is not exported from package /Users/mansi/letsgrowmore/to-do-list/my-rea ...

javascripthtmlcssnode.jsreactjs

Ensuring the validation of checkboxes using the Bootstrap framework

I am currently working on validating checkboxes using JavaScript. If the validation fails, I want to display a div with the class invalid-feedback below the checkboxes. However, when I add the invalid-feedback class to my div, it simply disappears. < ...

javascripthtmlcssbootstrap-4

The onclick function in HTML will only be executed during the initial click event

I've been working on creating a To-Do list and have managed to add all the necessary functionalities. However, I encountered an issue where the edit function only works the first time it is clicked. I tried searching for solutions online as I am rela ...

javascripthtmlcss

Ways to export redux store data to an external JSON file?

My Redux store is structured as object key value pairs listed below: { "appElements": { "layers": { "layer_1": { "scene": { "width": "100px", "height": "100px", "bgColor": "#aaaaaa", "bgImage": " ...

jsonreactjsobjectreact-reduximmutable.js

Ways to have a Typescript generic inherit from a specific type

I'm facing an issue related to a component I have. const MyComponent = <T, extends { optionalProperty?: MyType }> When I try to call <MyComponent<SomeGeneric>>, I get this error message: Type 'SomeGeneric' has no properti ...

javascriptreactjstypescripttypes

Establishing a parameter in the main component

In my current project utilizing react-router and redux, I have the below App component: export default class App extends Component { render() { return ( <div> <Header /> <PageTitle title="Projec ...

reactjsreact-routerredux

How to dynamically reduce the number of columns in a textarea using jQuery according to its content

Does anyone know how to make a textarea shrinkwrap the text inside on blur? The default number of columns is 10 or 15 and I want the textarea to adjust its width based on the text content. I have tried the following code: $('textarea').on(&apos ...

javascriptjqueryhtmlcss

Using the `.animate()` function in JavaScript causes a one-second delay

I'm encountering some difficulties with the .animate() function in Javascript. I'm using it to automatically scroll to an element within a div, which is functioning correctly. However, I am facing an issue where the scrolling freezes for a second ...

javascriptjquerycssanimation

Render images conditionally as background elements for the body, ensuring they do not increase the height of pages with minimal content

Incorporating NextJS image components into the RootLayout of a NextJS component with negative z-indexes and absolute positioning was necessary to align them with dynamic content. However, an issue arose when these images at the base route '/' cre ...

reactjsnext.jstailwind-cssstylingconditional-rendering

How can you change the direction of a React MUI <Menu /> component to right-to-left?

I am currently working with ReactJS and the Material UI framework. My application fully supports both right-to-left (rtl) and left-to-right (ltr) languages, and it functions perfectly in both cases. However, I have noticed that for the {component1} and { ...

reactjsmaterial-ui

Adding a fresh selection to the Bootstrap menu

I'm working on a straightforward Bootstrap form that includes a select input: <div class="form-group"> <label for="category" class="control-label col-sm-3">Category</label> <div class="input-group col-xs-8"> <sele ...

javascriptjqueryhtmlcsstwitter-bootstrap