I am encountering an issue while running npm run webpack in production mode where the CSS file is not being generated separately in the dist folder as expected. The file is not appearing as it should

Here is the code snippet from my webpack configuration file:

const currentTask = process.env.nmp_lifecycle_event

const path = require("path")

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

const config = { entry: './app/app.js', output: { filename: 'myBundle.[hash].js', path: path.resolve(__dirname, 'dist') }, plugins: [], mode: 'development', devServer: { port: 8080, static: path.resolve(__dirname, 'dist'), hot: true }, module: { rules: [ { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: "babel-loader", options: { presets: ['@babel/preset-env', '@babel/preset-react'] } } } ] } } if (currentTask == "build") { config.mode = "production" config.module.rules[0].use[0] = MiniCssExtractPlugin.loader config.plugins.push(new MiniCssExtractPlugin({filename:'main.[hash].css'})) } module.exports = config

Answer №1

After testing out your code, I can confirm that it is working well. The only issue I found is a small typo in the first line where you misspelled npm:

const currentTask=process.env.nmp_lifecycle_event

The correct version should be:

const currentTask=process.env.npm_lifecycle_event

Additionally, ensure that you have imported your .scss files within your javascript and that you are building your application using npm run build.

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

When is it appropriate to utilize props and CSS in customizing Material UI components?

As a beginner with Material UI, I'm curious about when to use props within the .jsx script and when to utilize CSS in a separate stylesheet to style MUI elements. Is it necessary to still incorporate CSS stylesheets for MUI elements or is it preferabl ...

Center-align an input and button vertically within a div

I am facing an issue with aligning my search setup vertically inside a div Below is the code I have written: HTML: <div class="search"> <input class="searchfield" type="text" placeholder="Search..." value="" />&nbsp;<button class="sea ...

How to Align <ul> to the Right in Bootstrap 4

Looking to align a list to the right in the header section, here is the code snippet: <div class="collapse navbar-collapse" id="app-header-nav"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item"> <a class=" ...

Styling the CSS tables with alternating row styles for rows 1 and 2, followed by a different style for rows 3 and 4. This pattern will repeat

I've been struggling to create a CSS table style using tr:nth-child to alternate row colors: Row 1 - Blue Row 2 - Blue Row 3 - White Row 4 - White ... and so on. I can't seem to get it right! Can anyone help me out with this? Appreciate an ...

When you refresh the page, the number of items in the cart displayed on the navbar always shows 0

When using my angular application, I encountered a problem with adding movies to a cart. Although I can successfully add them to the cart and see the correct number of movies reflected in the navbar, upon refreshing the page, the count resets to 0. Here i ...

Angular: Compilation of SCSS/SASS results in unexpected whitespace issues

I am encountering an issue with whitespace being added to the CSS after compiling a *.scss file in my Angular 7 project. This unwanted whitespace is causing incorrect results in the UI. To replicate the problem, you can visit... ...and copy and paste the ...

How come using float:right causes the div to float towards the left instead?

I am new to CSS and currently facing a problem with positioning a div (#inner) in the bottom-right corner of another div (#container). Initially, I used float: right;, but upon inspecting the Html, I noticed that the inner div is appearing in the bottom-le ...

Emphasize a portion of a text / Apply formatting to a variable

I am facing an issue where I need to format only the date in a specific string. I have managed to extract the date and store it in a variable after isolating it from the original message. <div class="foo"><p> Click here now and get by January ...

Ensure that the user's browser cache is cleared after deploying a new version on Firebase hosting

Utilizing create-react-app for my front end scripts and firebase hosting for deployment has been smooth overall. However, I've encountered an issue where updates to CSS and HTML files don't always reflect on the domain until I manually clear the ...

What is the process for removing NPM modules from the devDependencies in a Node.js environment?

Is there a way to remove npm modules along with their devDependencies in Node.js? ...

"Encounter an OAuth2 Authentication error when attempting to update yarn by self-update

Experimenting with the yarn self-update command to understand its functionality, but instead of updating the Yarn version, an OAuth error is encountered as follows: yarn self-update yarn self-update v0.15.1 error OAuth2 authentication requires a token or ...

When selecting a new tab in HTML, the current page position remains unchanged. However, I would like the page to automatically scroll to the

In the design of my website, I have incorporated buttons that are linked to various pages using navigation tabs. However, when these buttons are clicked, the view maintains its position on the new page (e.g., halfway scrolled through the page). Instead o ...

Transitioning between carousel slides will reveal a clean white backdrop

I'm currently facing an issue with my html website. It seems that when I navigate through the carousel slides on my Bootstrap-5 based site, white spaces keep popping up. How can I resolve this issue? Here is a snippet of my code: HTML <!doctype h ...

Is there a way to delete highlighted text without using execCommand and changing the font color

With my current use of JavaScript, I am able to highlight or bold a selected text range successfully. However, I am unsure how to undo the bold and unhighlight the text if the button is clicked again and the selected range is already bolded or highlighted. ...

Can an <option> element in WebKit be customized by adding an icon to it?

I have integrated a WebView into one of my software applications, and within the HTML page it is rendering, there is a <select> tag. I am interested in enhancing the <option> elements within this select tag by adding icons to them: (The shadow ...

Creating a Product Box design with CSS and incorporating visual elements

I have created a simple box design in Photoshop that I want to use to display product information. The box consists of a Header, Body, and Button, each as separate images. How can I assemble these elements using CSS/HTML? I only need the header text at th ...

What is the purpose of including a viewport meta tag on my website if I already have CSS media queries in place?

As someone who is just starting out with building websites, I have been delving into the world of meta tags. However, even after conducting thorough research, I am still unsure about the necessity of a meta viewport tag when I am already utilizing CSS me ...

Unable to save data to file: ENOENT error - file not found

I'm currently working on creating a folder named "build" that will house numerous map files and JavaScript files. However, I've encountered the following issue. Snippet of the code: "scripts": { "prestart": "d2-manifest package.json manifes ...

Having problems with loading @font-face in Ionic Framework Android app build?

While working on an app in Ionic Framework, I encountered a peculiar issue. https://i.stack.imgur.com/xk8uD.png In my Ionic Framework application, I am importing @font-face and running the app on an Android device (Galaxy SIII). Strangely, the font (Mont ...

Troubles with Angular elements not aligning correctly when using the "display: block" property

When using an angular element for a directive with "display: block", it may not automatically take up 100% of the width of the parent container. In order to ensure that it does, the width must be explicitly set to "100%" in the CSS. Despite setting "width: ...