In the production mode, Nuxt styles may not be properly applied

After working on this project for about four months, everything seems fine in the development version. However, once I build the project and upload it to the server, some of my styles are not applied.

For more information, I have imported styles both in components.

<style>
</style>

And assets css file. assets\css\style.css

I am not sure if what I did is right or wrong?

The first time I type npm run build in VS Code terminal, I encounter this error:

First time npm run build

**✖ Nuxt Fatal Error**                                                                                         
Error: EPERM: operation not permitted, mkdir                                                               
'C:\Users\rsh\folder\project\.nuxt\components' 

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b9ada4a6bbbeb1b7a094e5fae4fae4">[email protected]</a> build: `nuxt build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e78a9e9795888d828493a7d6c9d7c9d7">[email protected]</a> build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

 npm ERR! A complete log of this run can be found in:
 npm ERR!     C:\Users\rsh\AppData\Roaming\npm-cache\_logs\2022-01-17T10_43_05_599Z-debug.log

However, after the second attempt, the project builds with some warnings.

When it is built after the second try npm run build

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
 fonts/materialdesignicons-webfont.b26c938.eot (550 KiB)
 fonts/materialdesignicons-webfont.3073b3f.woff (265 KiB)
 fonts/materialdesignicons-webfont.bfd0d90.ttf (550 KiB)
fonts/icofont.9c33516.woff2 (525 KiB)
fonts/icofont.dad3acc.woff (630 KiB)
img/signin.1455693.svg (846 KiB)
6871893.js (376 KiB)
f031b5e.js (369 KiB)
bc52125.js (376 KiB)
0a7bf8a.js (371 KiB)
20d9dc3.js (673 KiB)
4ab266a.js (401 KiB)
5e1927c.js (1.35 MiB)
6796184.js (2.52 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the    recommended limit (1000 KiB). This can impact web performance.
  Entrypoints:
  app (3.42 MiB)
  7f9ae0b.js
  4fe44c5.js
  6796184.js
  20d9dc3.js

After npm run build

ERROR  Failed to compile with 3 errors                                                  friendly-errors 14:13:07


ERROR  in ./.nuxt/views/app.template.html                                              friendly-errors 14:13:07

Module build failed (from ./node_modules/html-webpack-plugin /lib/loader.js):            friendly-errors 14:13:07
 Error: ENOENT: no such file or directory, open 'C:\Users \rsh\project1\.nuxt\views\app.template.html'
                                                                                    friendly-errors 14:13:07

ERROR  in ./.nuxt/client.js                                                             friendly-errors 14:13:07

  Module build failed (from ./node_modules/babel-loader/lib/index.js):                    friendly-errors 14:13:07
 Error: ENOENT: no such file or directory, open 'C:\Users\rsh\project1\.nuxt\client.js'
                                                                                    friendly-errors 14:13:07
 @ multi ./node_modules/eventsource-polyfill/dist/browserify- eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000& ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js
                                                                                           friendly-errors 14:13:07
 error   

Whenever I type nuxt build in the VS Code terminal, I encounter this error:

With nuxt build

  nuxt : The term 'nuxt' is not recognized as the name of a cmdlet, function, script file, or    operable program. 
  Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
  At line:1 char:1
  + nuxt build
  + ~~~~
  + CategoryInfo          : ObjectNotFound: (nuxt:String) [], CommandNotFoundException
  + FullyQualifiedErrorId : CommandNotFoundException

I would truly appreciate any help or shared experiences regarding this matter.

Answer №1

After encountering the same issue, I managed to resolve it by modifying my nuxt.config.js build configuration.

Through experimentation, I discovered that by consolidating all my CSS into a single file using this code snippet (as per the Nuxt documentation), I was able to synchronize development and production styles while also effectively overriding styles from Vuetify.

 extractCSS: {
  ignoreOrder: true
},
optimization: {
  splitChunks: {
    cacheGroups: {
      styles: {
        name: 'styles',
        test: /\.(css|vue)$/,
        chunks: 'all',
        enforce: true
      }
    }
  }
},

I believe implementing this solution could be beneficial for you 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

Counter for the type="range" HTML input

I recently read an article discussing the possibilities of displaying ticks in Chrome and Firefox for a number input with the type "range". I was intrigued to find out more about this feature and came across a helpful discussion on Stack Overflow. ...

JavaScript and jQuery code: Trigger the vjs-fade-out class to toggle when the userActive value in video.js changes

I am currently utilizing video.js to develop a player that is compatible with various devices. One crucial feature I have included is a custom "return to menu" button located in the top right corner of the video player. The challenge I am facing is dynamic ...

Concealing/Revealing Elements with jquery

For hours, I've been attempting to switch between hiding one element and showing another in my script. Here is the code I am using: <script type="text/javascript"> function () { $('#Instructions').hide(); $('#G ...

The CSS styling is not being rendered correctly on the AngularJS HTML page

Encountering a puzzling situation here. Our angular controller is successfully delivering data to the page, but we are facing an issue with rendering a table due to an unknown number of columns: <table border="1" ng-repeat="table in xc.tables"> ...

No errors encountered during compilation for undefined interface object types

Hey there, I'm currently exploring the Vue composition API along with Typescript. I'm facing an issue where I am not receiving any errors when an interface does not align with the specified types for that interface. Although my IDE provides aut ...

Can floated divs be prevented from collapsing without taking up any width?

Let's discuss an issue that is not related to block elements collapsing when their children are floated, and has nothing to do with clearing at all. Imagine having a set of floated divs like: <div class="column">Column 1</div> <div cl ...

Customize Appearance: Overlay Images with Display Properties

I have created a unique slideshow that overlays multiple images using JavaScript to change their opacity and attributes. You can view the slideshow here: Upon inspection (using firebug), I noticed an issue with how the images are displayed. When the displ ...

What are some methods for applying border styles to the first and last row of a table using Material UI?

In my current project, I am utilizing the combination of Material UI and React Table. Recently, I was asked to implement an expandable row feature, which I successfully added. Once the user expands the row, we need to display additional table rows based on ...

Unable to send form data to PHP script

Looking for assistance with passing a variable from a number input to a PHP page. HTML CODE <input type="number" class="count count-disco" name="quantity_disks" autocomplete="off" placeholder="0"> https://i.sstatic.net/BK3X9.png PHP and JQUERY CO ...

What is the best way to keep the menu bar in place as you scroll?

Can someone help me figure out how to keep the menu bar fixed at the top of the page when the user scrolls down? I've tried various methods but haven't had any luck. Any assistance would be greatly appreciated. Here is the CSS code: And here is ...

Should padding be added to container-fluid in order to ensure consistent spacing on all devices from left to right?

After creating a webpage, I realized that it wasn't responsive. Now I am in the process of recreating the page and have a dilemma on whether to use container or container-fluid. Based on some blogs I've read, container-fluid seems like a better o ...

Issue encountered during rendering: "TypeError: Attempting to access property '_t' of an undefined object" while running a Unit Test using Jest

I spent hours troubleshooting a unit test for my Vue.js component, but no matter how much I searched the internet, I kept encountering this error: console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884 TypeError: Cannot read property ' ...

Setting up a redirect from HTTP to HTTPS in a Vue.js application

My attempts to configure the nuxt.config.js file as shown below have not been successful. The application is only accessible via "https" and not "http". What could be the issue? import path from 'path' import fs from 'fs' import redirec ...

Using JavaScript to show a prompt message inside an h1 tag within a newly created div

I have developed a basic JavaScript program that opens a prompt dialog when the div tag is clicked, allowing the user to enter text. The program then creates a new div element and displays the entered text above it. However, I am facing an issue where I wa ...

What is the best way to adjust the height of a row in a Material UI table using CSS

I've been attempting to establish a row height of 30px for a table (https://material-ui.com/components/tables/), but it seems that the minimum I can set is 53. Why is this restriction in place? How can I adjust the row height to 30px using CSS based ...

Include image hover text without using HTML

I am looking to add a hover effect to some images using CSS and JS since I cannot directly edit the HTML file. The goal is to have centered text pop out when hovering over certain images. I know the div class of the image but unfortunately, I cannot add te ...

Vue 2: Exploring the method of retrieving child values using v-model binding

When using v-model in a custom component, I noticed that the data (value props) of the child component in the parent component is not updating properly. Even after changing the data in the parent, the old value persists. Strangely, if I use setTimeout to r ...

Animating a CSS shape with the .animate method

I need help creating a dynamic graphic for my school project using css, jquery, and html. I want to make a rectangle that moves across the screen, but I'm having trouble getting it to work properly. Despite trying different variations of the animate f ...

Is there a way to conceal one column in a row and display only the second column from a medium screen to a small screen using Bootstrap 5?

I am currently working on creating a row with two columns, one being the left_bar column and the other a large image. My goal is to display only the large image (column 2) when the screen size changes from medium to small breakpoints, hiding the left_bar c ...

The Impreza theme is experiencing difficulty displaying Font Awesome icons

Recently, I had a client who needed a WordPress website. After working on the project on my own server, I finally completed it and transferred the entire site to the client's main domain at gulugalmarketing.com. Everything was functioning perfectly o ...