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

Vue JS - Show the second option in the select menu once the first option is disabled

Can anyone assist me with displaying the second option in a select drop-down menu after the menu is disabled? The select menu will be disabled if there are only two options available. However, instead of showing the default 'Select nationality' ...

Using Jquery and CSS to create a sleek animation for opening a div box container

Designed an animation to reveal a div container box, but it did not meet the desired criteria. Expectations: Initiate animation horizontally from 0% to 100%. Then expand vertically to 100% height. The horizontal animation from 0% to 100% is not visible ...

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Recently, I've been working on a document that features a top navigation with 4 different links. Each time a link is clicked, a div right below it changes its size accordingly. My goal now is to implement the use of cookies to remember the last select ...

The background image is failing to display, although other styles for the class or element are visible

Why won't the background image display, even though I have verified that the image path is correct and changing other properties like color or background color works just fine? Here is my CSS code snippet: .container { background-imag ...

Unleash the power of WordPress Revolution Slider captions with exclusive CSS styling

Struggling with adding custom captions? I'm using a Multisite WordPress setup and trying to avoid editing the captions.css file in the plugins folder. Here's what I attempted: .rev_slider .tp-caption .my_head{ position: absolute; ...

Using Vue.js to retrieve this.$route.params within the mounted hook functions

I am attempting to sort through a movie table by director ID. A movie's structure looks like this: { id: 1, title: "They All Lie", releaseYear: 1989, director: { id: 18, ...

What is causing these divs to shift apart instead of staying next to each other when the browser window is resized?

I am facing an issue with two of my divs not staying next to each other when resizing the browser window. They align perfectly when the window is wide, but as soon as I resize it to a narrower resolution, the right div moves below the left one: http://jsfi ...

What is the method for allowing users to determine the maximum number of checkboxes that can be selected in Element-ui?

On my questionnaire creation page, I want to give users the ability to choose how many options they can select for each question. By default, there will be 1 option selected, but users should have the flexibility to choose up to 2 or 3 options. How can I ...

What is the best way to send an array to a Vue component?

I am encountering an issue while attempting to pass an array to a Vue component in order to construct a table. The error I am facing indicates that I am passing a string instead of an array. Component: <template> <div> <table> ...

Styling a modal popup using session storage in CSS

I recently created a modal popup using CSS by following a helpful tutorial that can be found at this link: Now, I am curious about how to store the value entered in a textbox as session data. I came across some code in another tutorial that demonstrated h ...

Unable to utilize a custom function within JQuery

I'm facing an issue with using the function I created. The codes are provided below and I keep encountering a "not a function error." var adjustTransparency = function () { //defining the function if ($(this).css('opacity&apo ...

Is there a way to automatically import all images from a folder in VUE?

I'm attempting to automatically import all images from a folder. Here is what I've tried under // tested: <template> <p>classical art</p> <img v-for="image in images" :key="image" :src="image.url& ...

Using a component in Vue 3 by importing it

Hello, I'm having an issue with importing a component in Vue 3. Here is the structure of my component : +src +App.vue +components +Navbar.vue In my App.vue file, I attempted to import the component using the following code : <scr ...

Unlock the potential of Bootstrap 4 in Vue.js 2 without the need for bootstrap-vue

I'm interested in finding a way to incorporate bootstrap 4 into my vue.js 2.6 framework. Despite the abundance of tutorials available, many of them are outdated as of late 2020, or they insist on using bootstrap-vue, which introduces unwanted addition ...

Ways to display or conceal text using Vanilla JavaScript

I am struggling to toggle text visibility using Vanilla JS. Currently, I can only hide the text but cannot figure out how to show it again. <button id="button">my button</button> <div> <p id="text">Hello</p& ...

"Encountering a Javascript issue while trying to apply a CSS class to a

Encountering issues in Safari desktop / mobile and Internet Explorer. The error message states: In Safari: TypeError: Attempted to assign to readonly property. IE Edge: Assignment to read-only properties is not allowed in strict mode The problem arises ...

Creating a CSS Grid with Scroll Snap functionality to mimic an iPhone screen in HTML

I have created an iPhone simulator using HTML. It's in German, but I can provide a translation if needed: // JavaScript code for various functionalities related to the iPhone interface /* CSS styling for the iPhone interface */ <meta name="v ...

What is the best approach for preserving server data across all users?

Learning Vue has been quite the journey for me, and I'm stuck on how to properly set up a "global storage". Let's get straight to the point: I need to fetch user data once (from the server) so that it can be accessed from any component. For in ...

Strange border adjustment for customized-height input[type=button] in Internet Explorer 6 and Firefox 3

Upon my discovery, I encountered a peculiar issue in IE6/FF3 when trying to set a custom height (even if it matches the default) on a button. The following code illustrates that although both buttons have the same height, their padding differs inexplicably ...

What is the best way to include a search box in the mobile view between the brand and menu toggle?

Is there a way to place the search bar between the brand and menu toggle on the mobile view without it appearing on a separate row either under or over the navbar? I've been trying to override some Bootstrap CSS but haven't found a solution yet. ...