Issue with Webpack 5 failing to generate the CSS file

Despite generating js files with the configuration below, I'm experiencing issues with creating the css files. I'm seeking guidance on where my mistake lies.

I am currently using Node 15.8.0, Webpack 5.27.1, and Bootstrap 4.6.0. For completeness, I have included the package.json and webpack.config.js files.

package.json

{
  "name": "website",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --mode development --progress",
    "watch": "webpack --watch",
    "production": "webpack --progress --mode production"
  },
  ...

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...

module.exports = {
    context: __dirname,
    entry: [
        './src/index.js',
        './src/theme.scss',
    ],
    output: {
      ...
    },
    mode: 'development',
    devtool: 'source-map',
    externals: {
        jquery: 'jQuery'
    },
    resolve: {
      ...
    },
    plugins: [
      ...
    ],
    module: {
       ...
    },
    optimization: {
      ...
    }
};

Answer №1

When looking at the npm page for optimize-css-assets-webpack-plugin, it clearly states that it is not compatible with Webpack 5. The recommended alternative is the css-minimizer-webpack-plugin, which can be found on GitHub.

Answer №2

Hey there, I encountered a similar issue and discovered that the root cause was actually a missing dependency called "babel-polyfill". It's worth checking if this is the culprit in your case as well.

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

Setting up the HTML meta viewport for a full 100% width display

Is there a way to display my website on mobile devices at 100% width in both landscape and portrait views? I attempted using this HTML code without any CSS styling: <!DOCTYPE html> <html lang="hu"> <head> <meta name="viewport" co ...

Switch a div to a computed location

I'm having trouble getting this code to animate a div to a calculated position. Can someone please help me troubleshoot? $(document).ready(function() { var is_Clicked = false; $("#togglebutton").click(function() { if (is_Cli ...

The button's height exceeds the height of the nested content

Currently, I am utilizing bootstrap 4 alpha version. <button class="btn btn-link p-0"> <div style="display:inline-block; background-color:#c2f5ff; width: 100px; height: 100px;"> </div> </button> Check out the Fiddle here In ...

What is preventing the border from being added to my <a> tag when using the :visited css rule?

I'm struggling to add a small vertical line next to a link once it has been visited. .navigation a:visited { border-left: 3px solid black; color: purple; } <div class="navigation"> <div class="content"> <div id="w">W</ ...

Variety of part ingredients

In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the lay ...

Implementing various style guidelines for distinct elements

Currently, I am struggling with organizing my unordered list elements to be stacked side by side. The style rule I have been using is as follows: #slide ul,li{ float:left; list-style-type:none; } Now, I am attempting to introduce another unordered list t ...

Issue with border spacing functionality

I'm having some difficulty with my border spacing in CSS. No matter what size I specify, it doesn't seem to have any effect. I just want to use a border for the top line. Here is my CSS: p { border-spacing: 5000px; text-align: right; ...

Display or conceal the login form based on JavaScript availability

I have a small login form that I want to display if JavaScript is disabled. The form has a similar structure: <a ...href="#"...>Login</a> <div class="dropdown-menu" style="padding-left:17px; left:-70px; width:200px;"> <form action="/l ...

struggling to align the div elements

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cougar Inn Directions</title> <link rel="stylesheet" type="text/css" href="case.css" /> <link rel="stylesheet" href="http://code.jquer ...

Modify the value of a variable's color using a combination of bootstrap, JavaScript, and jinja2

I need to show different colors for various Jira statuses such as Open, In Progress, Reopened, Resolved, and Closed. The current solution is functional, but I am searching for a more efficient method. {% set state = 'Closed' %} {% if state ==&ap ...

Learn how to create an animated refreshing icon in React when clicked

I have a refresh icon in my React app that utilizes Material UI. I want the icon to spin for a second after it is clicked, but I am unsure of how to achieve this. Despite attempting some solutions, none have been successful. const useStyles = makeStyles(( ...

The vertical dimension of an element does not increase

Currently, I am working on a webpage with a header, page content, and footer sections. The issue I'm facing is that I set the page's height to height :auto;, but it's not functioning as expected. I actually need the page to automatically ex ...

Is there a way to adjust the slide length in JQuery's slideUp function using pixels? It seems like

At the bottom of a page, I have a fixed position div element. There is another div below it, but it is hidden outside of the page margins. I am attempting to slide both divs upwards so that the bottom one becomes visible (moving out of the margin). However ...

Change the color of a div by hovering over the text using CSS

Having some difficulty with changing the background color of a div when text is hovered over. The setup involves using absolute positioning for the div.book element, and the text is positioned absolutely on top of it with the text having a higher z-index ...

Issue with dragging and styling windows in Safari on iOS

When checking my website on Safari using an iPad or iPhone, I noticed that I can touch and drag left to right, causing the entire window to move and reveal the grey background behind it. Here is a link to my page. However, when visiting other websites, no ...

Flexbox allows for a unique custom layout design for your gallery

I'm having some difficulty implementing a gallery layout using flexbox. https://i.sstatic.net/cGplk.png Currently, my code is displaying two small images along with the large one in the top row, and then placing the remaining two small images in the ...

Adjust image to fit inside a compact popup window - Implementing React.js and Bootstrap

Hello, I could really use some help with a problem I'm facing. I am currently working on my personal portfolio website using react.js and bootstrap. I've integrated the react popupbox package, but I noticed that on small screens, my picture is no ...

PHP: the images uploaded are not located within the designated folder

Having trouble uploading multiple images to a folder and saving them in the database? The images are not moving to the folder, even though the code works on localhost. Here is the code snippet: var abc = 0; // Declaring and defining global incremen ...

Sassy function that yields a class

Can you help me with this coding issue I'm facing? .npt { ul { li { a { background: $red-700 !important; } } } } I want to create a mixin that allows me to pass a color base like ($blue) and return the corresponding C ...

Is it possible for 'will-change' to achieve the intended outcome when implemented using the Web Animations API?

Google recommends: Google suggests that if an animation may occur within the next 200ms [...] it's a good idea to use will-change on elements being animated. In most cases, any element in your app's current view that you plan to animate should ...