Issue Encountered While Loading CSS using Webpack and Babel

I am currently working on a SSR React App using Webpack3 and Babel6. However, when I launch the server, it is not able to locate any css file (Error: Cannot find module './file.css').

Here is an overview of my current folder structure:

src/
  |-components/
     |-App/
        |-App.css
        |-App.jsx

App.jsx

....
import './App.css';
....

webpack.config.js

....
module.exports: { loaders: [
  ....
  {
    test: /\.css$/,
    loader: ['style-loader', 'css-loader'], // I have already installed the loaders and added them to package.json under devDependencies
    include: path.join(__dirname, 'src'),
    exclude: /node_modules/
  }
  ....
]}

Any suggestions or solutions to this issue?

cssreactjswebpackimportbabeljs

Answer №1

When you set up local package installations, they are typically placed in the node_modules folder within your project directory. This means that both style-loader and css-loader will be located there as well. However, if you find that these packages are missing from your assets compilation due to exclusion in your webpack.config.js file, simply eliminate the exclude line to ensure everything runs smoothly.

Your revised webpack.config.js file should resemble the following:

webpack.config

....
module.exports: { loaders: [
....
{
  test: /\.css$/,
  loader: ['style-loader', 'css-loader'],
  include: path.join(__dirname, 'src'),
}
....
]}

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 steps should I take to ensure my Bootstrap CSS3 code is error-free and W3C validated?

My customer is requesting that I validate the HTML5 & CSS3 code using W3. I plan on incorporating Bootstrap 3.3.4 into the project, but after including it and checking at , I discovered 32 errors and 142 warnings. The W3C CSS Validator results for (C ...

twitter-bootstrapcss

Position an iframe in alignment

I'm working on a HTML page and I have been trying to figure out how to align an iframe at the bottom of the page so that it spans the entire width. Despite my efforts, I haven't been successful in getting the iframe to align properly at the botto ...

htmlcssiframe

I'm struggling to make this background show up in a div

Anyone able to help me figure this out? I can't seem to get the achtergrond_homepage.png as a background in rounded corners. Edit: It seems like the gray color is always on top. Could it be controlled in the JavaScript part? This is the CSS: @ch ...

javascriptcssbackground

CSS Hue Rotate is causing the image to appear darker

The CSS filter hue-rotate seems to be darkening my image according to my observations. For an example, visit: https://jsfiddle.net/m4xy3zrn/ Comparing images with and without the filter applied, it’s clear that the filtered one appears much darker than ...

csscss-filters

The dependency tree for @mui/material cannot be resolved due to an ERESOLVE issue

I attempted to follow the instructions on the homepage to install Material UI, but encountered a dependency tree error: C:\dev\shape-shop-front-end>npm install @mui/material npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency ...

reactjsnpmmaterial-ui

Ways to align the contents of a div in the center

Looking at the content in this div, it seems that the top is positioned higher than the bottom. Can anyone provide some guidance on how to fix this? .dtestContactDet{ border-bottom:1px solid #D7D7DE; border-bottom:1px solid #D7D7DE ; -khtml-border-bo ...

css

Selenium Webdriver is retrieving background colors with unexpected alpha values

When I need to retrieve the background-color of a WebElement, I typically use the following code: string color = IWebElement.GetCssValue("background-color"); Selenium often returns something like this for the color value: color = "rgba(153, 255, 255, 1) ...

c#cssseleniumselenium-webdriver

Adjust the table cell width to match the width of the ASP image

Below is the ASP image within a table cell: <tr> <td> <asp:Image runat="server" Width="64px" Height="64px" ImageUrl="~/Images/user64.png" /> </td> ...

htmlcssasp.nethtml-tablewebforms

Specify the height of a div tag based on a certain condition

I'm trying to style a div tag in a specific way: If the content inside the div is less than 100px, I want the div tag's height to be exactly 100px. However, if the content's height exceeds 100px, I want the div tag's height to adjust au ...

htmlcss

The combination of Material UI nested theme providers can disrupt the functionality of the withStyles H

My React application was developed using Create React App and incorporates the @material-ui/core npm package for theming. To customize components, I make use of the withStyles higher-order component provided by MaterialUI. The documentation mentions supp ...

reactjsmaterial-ui

What is the process for extracting the differences between two or three files and merging them together in Node.js?

Recently, I've been experimenting with webpack and successfully managed to output and transform es5 build to include nomodule in the tags directly from HtmlWebpackPlugin using hooks. Similarly, for the es6 build, I added type="module". Howe ...

javascripthtmlnode.jswebpack

The Hover Hover textbox stays in place once clicked on

I have implemented a search bar that displays a textbox when a user hovers over a button. I am looking to modify the code so that the textbox remains visible even after the user has clicked on it. This way, if the user accidentally moves their mouse away f ...

javascriptjqueryhtmlcss

Can JavaScript be utilized to retrieve the MAC address?

Is it possible to retrieve the Mac addresses of a system for login using JavaScript? ...

javascriptreactjsmac-address

Issue with Pagination functionality when using Material-UI component is causing unexpected behavior

My database retrieves data based on the page number and rows per page criteria: const { data: { customerData: recent = null } = {} } = useQuery< .... //removed to de-clutter >(CD_QUERY, { variables: { input: { page: page, perPag ...

javascriptreactjstypescriptmaterial-ui

Issues with rendering HTML5 drag and drop styles are not visible on a Windows Server 2003 platform

I am currently developing a file upload tool utilizing Valum's Ajax-Uploader as the foundation. The concept is reminiscent of how attaching files works in Gmail. Users should be able to simply drag and drop a file from their desktop into the browser w ...

javascriptcsshtmlwindows-server-2003

What is the best way to incorporate parallax scrolling in the center of a webpage?

I am trying to implement a parallax scrolling effect in the middle of my page, but it seems to be causing issues once I reach that section while scrolling. I attempted to use intersection observer, but unfortunately, it did not resolve the problem. const ...

javascripthtmlcssscrollparallax

Navigating the path requests between React and Express

I am currently developing an app that incorporates login and registration functionality using React and Express. To handle form data and submission, I have implemented Formik in my project: > const initialValues={{username:"", email:"", password:""}} o ...

node.jsreactjsexpress

Facing an ESIDIR error in NextJs, despite the fact that the code was sourced from the official documentation

For an upcoming interview, I decided to dive into learning Next.js by following the tutorial provided on Next.js official website. Everything was going smoothly until I reached this particular section that focused on implementing getStaticProps. Followin ...

javascriptreactjsnext.js

Exploring the integration of foreign languages within C# code?

In search of a C# expert who can assist me with a question I've been struggling to find an answer for all day. Google searches have yielded outdated information, and I need fresh insight. Wondering if there's a way to incorporate CSS and HTML in ...

c#css.netwinforms

Tips on displaying a single column in Bootstrap when only one item is present and switching to two columns when two items are present

Currently, I am utilizing the row class in Bootstrap which contains two columns, one for X and one for Y. There are scenarios where either the X column, the Y column, or both may be present within the row. Since a row can have up to 12 columns, when only t ...

htmlcssbootstrap-4