Minification of CSS - Vuetify

While working on my Nuxt project with Vuetify, I noticed that the page source is quite lengthy with 26k lines of code, most of which is generated by Vuetify's CSS. On comparing it with other pages, I see shorter code with difficult-to-read CSS. Is there anything specific I should be doing to address this issue? I have not made any changes to vuetify in nuxt.config as of now.

vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
  dark: false,
  themes: {
    dark: {
      primary: colors.blue.darken2,
      accent: colors.grey.darken3,
      secondary: colors.amber.darken3,
      info: colors.teal.lighten1,
      warning: colors.amber.base,
      error: colors.deepOrange.accent4,
      success: colors.green.accent3
    }
  }
}

Answer №1

No need to fret. There's no action required on your part. What you're viewing in the page source is simply a development version of your page. Once in production, this will be taken care of by Nuxt.

For a speedy trial, give nuxt start a go and check out the page source once more.

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

Jekyll is not beginning line numbers from the first line as they should be

My website was put together using Jekyll, specifically with the Beatiful-Jekyll theme. To make syntax highlighting possible, I utilized Rouge. The issue arises when displaying line numbers alongside the code - sometimes they don't align properly or ar ...

VueJS added a new object to the array, but the data did not update reactively

Here is my current data layout days: [ { id: 0 name: 'Monday', times: [] }, { id: 1 name: 'Tuesday', times: [] } } I have implemented the following function to append an object to the times array. onT ...

Use regular expressions to automatically generate HTML attributes in your styling

My ionic/angular app generates a custom tag element with a unique _ngcontent attribute on each refresh, like so: <tag _ngcontent-hgr-c2>...</tag> (1st refresh) <tag _ngcontent-agj-c7>...</tag> (2nd refresh) <tag _ngcontent-cfx-c5 ...

What Could Be Causing My Webfonts to Be Inaccessible on Windows Devices and iPhones?

I recently created a simple holding page on www.tomrankinmusic.com The Webfonts I embedded in the page display correctly in the latest versions of Firefox, Safari, and Chrome on Mac OSX Lion 10.7.4 but do not show up in Chrome and IE6 on Windows XP Pro, d ...

Navigate to the Vuex Store to gain entry into the module

I have a module called ProfileData with the following structure: export const ProfileData = { state: { ajaxData: null; }, getters: {/*getters here*/}, mutations: {/*mutations here*/}, actions: {/*actions here*/} } This module ...

Leverage CSS variables within the `url('data:image/svg+xml')` function

Here is a CSS snippet I use to create a dashed border around a div: div { width: 100px; height: 100px; border-radius: 16px; background-image: url('data:image/svg+xml,%3csvg stroke="black" width="100%25" height="100%25" xmlns="http://www.w ...

What is the process for adding an additional level to an Object for an item that is not predefined?

The primary concern at hand is as follows: Retrieve JSON data from the server Populate a form with the data Serialize the form Create a JSON object with the correct structure Send the JSON object back to the server I am facing challenges specifically on ...

Creating a universal function to handle setTimeout and setInterval globally, inclusive of clearTimeout and clearInterval for all functions

Is it possible to create a universal setTimeout and setInterval function with corresponding clearTimeout and clearInterval for all functions while passing values to them? The situation is as follows: 1. More than 8 functions utilizing setInterval for act ...

Filtering a list with Vue.js using an array of checkboxes

Currently, I am exploring ways to filter a v-for list using a checkbox model array with multiple checkboxes selected. Most examples I have come across only demonstrate filtering one checkbox at a time. In the demo here, you can see checkboxes 1-3 and a lis ...

`vue-template-compiler package.json module not found in each new project``

After transitioning from Linux to Windows and setting up a programming environment, I encountered an issue that I didn't remember facing on Linux. Here are the steps I took: 1. Installed Node.js 2. Ran npm install -g @vue/cli for CLI installation 3. C ...

I'm attempting to create a dropdown menu, but I'm struggling to keep it open when I hover over an option

Seeking assistance as a beginner in coding. I am struggling with creating a dropdown menu option on my website. The issue is that the menu closes whenever I attempt to move my mouse to select other options. It seems to work fine when using the run option h ...

Return to the initial stage of a multistep process in its simplest form following a setTimeout delay

I recently customized the stepsForm.js by Copdrops and made some modifications. Although everything works well, I'm struggling to navigate back to the initial step (first question) after submitting the form due to my limited knowledge of JavaScript. ...

Do you know of a more streamlined approach to formatting this SCSS code?

Currently working on a Saleor Site and diving into the world of Django and SASS for the first time. While crafting my own styling rules in SCSS files, I've noticed some repetitive code that could potentially be streamlined. It seems like there should ...

What is the best way to showcase a ul element as inline-block?

Is there a way to keep the bottom menu aligned in one row on all screen sizes? I attempted using display: inline-block, but it doesn't seem to work for me. Below is the CSS code: footer #middle-footer { background: #F6F6F6; color: #000; font-size ...

How can I include npm package js and css files in Vue CLI with webpack?

I am currently attempting to integrate an npm package into my vue-cli development site. The instructions provided by the package website are as follows: https://i.stack.imgur.com/R2Inl.png The instructions state that both the css and js files need to be ...

The CSS counter fails to increment

In this unique example: h3 { font-size: .9em; counter-reset: section; } h4 { font-size: .7em; counter-reset: subsection; } h3:before { counter-increment: section; content: counter(section)" "; } h4:before { counter-increment: subsection 2; ...

Using a URL in the fill property is a simple process that involves specifying

Here is the snippet of the code I'm working with: <?xml version="1.0" standalone="no"?> <html> <head> <style> .someClass { fill:"url(#Pattern)"; } </style> ...

CSS: Indication that the Text is Extending Beyond its Container

Seeking a solution to indicate overflow of text within its container, as demonstrated in this example. Essentially, a <span> with fixed dimensions. Looking for a visual cue when text exceeds boundaries. Attempted the use of text-overflow:ellipsis;, ...

What could be causing the custom delimiters in vuejs to fail to function properly?

I'm currently combining vuejs with Jekyll and I am looking to implement custom delimiters for vue since Jekyll uses the same ones. This is specifically for a static site setup. The versions I am using are vuejs v2.6.10, vuetify v2.0.0beta-4, and jeky ...

What could be causing appendChild to malfunction?

I'm having an issue trying to create three elements (parent and one child) where the third element, an <a> tag, is not appending to modalChild even though it's being created correctly. modal = document.createElem ...