Modifying the order of Vuetify CSS in webpack build process

While developing a web app using Vue (3.1.3) and Vuetify (1.3.8), everything appeared to be working fine initially. However, when I proceeded with the production build, I noticed that Vue was somehow changing the order of CSS.

The issue specifically revolves around the classes .v-list__tile__content and .align-end.

In the vuetify.css file, these classes are located on lines 4844 and 7236 respectively. But after running npm run build, in the dist/css/chunk-vendors.*.css file, their positions are altered to 108929 and 100729. As a result, the sequence in which the styles are applied gets switched, consequently affecting this div:

<div class="v-list__tile__content align-end">...</div>

This leads to variations in appearance between the development server and the production environment.

On DEV: https://i.sstatic.net/90miD.png

On PROD: https://i.sstatic.net/k5NwI.png

The generated div is tied to this component:

<v-list-tile-content class="align-end">{{ dish.price }}</v-list-tile-content>

The root cause lies in the 

align-items: flex-start/flex-end;
property.

Is there a systematic solution to address this quirk? While one workaround could involve overriding the style directly, it raises concerns about potential reoccurrences.

javascriptcssvue.jsvuetify.jsvuetify-1

Answer №1

It seems like the changing order of your CSS during the build process may be due to minification, assuming there are no differences in your code between environments. Certain tools may rearrange selectors based on property values, such as:

.foo {
  align-items: flex-start;
}

.bar {
  align-items: flex-start;
}

Which could be transformed into:

.foo, .bar {
  align-items: flex-start;
}

This alteration could potentially impact the sequence of your CSS rules.

Sharing your build configuration might help pinpoint the root cause of this issue.

Answer №2

The issue appears to stem from the language affecting text direction

element.style {
    direction: ltr;
}

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

At what point will the browser display changes made to css using jQuery?

When I run my JavaScript code in Firebug, it looks like this: tr=$(this).parent('tr'); tr.find('.img-delete').css('display','block'); However, I am unable to see the change reflected on the browser. Is there a wa ...

jquerycss

The Vue.JS application encountered an error while making an API request, resulting in an uncaught TypeError: Cannot read properties of undefined related to the 'quote'

<template> <article class="message is-warning"> <div class="message-header"> <span>Code Examples</span> </div> <div class="message-body"> ...

javascriptvue.jsvuejs3

Designing a button component with text

Exploring My Demo Page, I am attempting to design a button that will serve as a closure mechanism for modals. The code snippet I experimented with is as follows: x=document.createElement('button'); x.className='superclose'; Referencin ...

javascriptjquerydom

Having trouble with the nth-child CSS property in Bootstrap?

My cards need some styling adjustments - specifically, I want the first and third card in each row to have a top margin of 50px. Strangely, this doesn't seem to work with Bootstrap, but it does with pure CSS. Is there a specific class in Bootstrap tha ...

csstwitter-bootstrapbootstrap-4

Guide on transferring value from a <select> element using JavaScript

I'm attempting to pass the selected value of a <select> in the onChange function. I've explored this question on SO, but unfortunately, using this and this.value hasn't been successful. I understand that the question is quite old... se ...

javascriptreactjs

How come the error message in AngularJS is appearing as blank during error handling?

When utilizing AngularJS code to send a request to the server, everything works smoothly on success. However, deliberately redirecting the request to a different domain causes the CORS problem where the error handling function is triggered but errorData ...

javascriptangularjserror-handlingpromise

Is it possible to conceal the mapbox access token during the map initialization process?

I have successfully integrated the mapbox API to create an interactive map on my website. To ensure the security of my access token, I have set up a proxy to handle the API requests externally. However, I am facing a challenge when it comes to hiding the a ...

javascriptmapboxaccess-tokenmapbox-gl-jsmapbox-gl

The TypeScript declaration for `gapi.client.storage` is being overlooked

When I call gapi.client.storage.buckets.list(), TypeScript gives me an error saying "Property 'storage' does not exist on type 'typeof client'." This issue is occurring within a Vue.js application where I am utilizing the GAPI library. ...

javascripttypescriptvue.jsgoogle-api-js-client

Having trouble retrieving the desired data from the JSON file

My current code is not giving me the expected results while trying to access JSON values with jQuery. Any suggestions on how I can resolve this issue? // JSON response: [{ "private": "8044553.0" }, { "governmentdocs": "98952.0" }, { "officiald ...

javascriptjqueryjson

Guide to creating a hierarchical navigation system with HTML

Is there a way to create a menu tree using just HTML and some scripting, without downloading additional software? I tried searching on Google but all the results require downloads. Can anyone provide guidance or help with this task? Thank you in advance. ...

javascriptjqueryhtml

Employing Ajax for interacting with a database

I am attempting to query my database using a JavaScript function for the first time, and I am struggling to get it to work. While unsure if this is the correct approach, it is the one that I have come across. Below is a simple snippet of my HTML code: < ...

javascriptphpjqueryajaxdatabase

Display the precise outcome for each division following a successful AJAX callback

I’m facing a challenge in getting individual results for each item after a successful AJAX callback. Currently, I am able to retrieve results, but when there are multiple items, all displayed results are being added to each div instead of just the corres ...

javascriptjqueryajax

Populate Vue 3 Element-plus Virtualized Table with actual data

As a newcomer to frontend development, I am currently working on integrating Element-plus Virtualized Table with actual data. Here is the basic structure of the example: const generateColumns = (length = 10, prefix = 'column-', props?: any) => ...

javascriptarraysvue.jselement-plus

Tips for sending a structured search query to the findOne() function in MongoDB with Node.js

I have a Restful service built with node.js that takes user input to create a query string for MongoDB. However, whenever I try to pass this query to findone() in MongoDb and call the service, it displays a "query selector must be an object" message in the ...

javascriptnode.jsmongodb

Having trouble with the Slide Toggle menu closing unexpectedly?

$('span.nav-btn').click(function () { $('ul#menu').slideToggle(); }) $(window).resize(function () { if ( $(window).width() > 900) { $('ul#menu').removeAttr('style') } }); $('spa ...

javascriptjqueryhtmlcss

The object does not contain a 'navigation' property within the 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' type

As a beginner in react native, I am facing some challenges with the components I have created. Let me share them: List of Playlists: export default class Playlists extends Component { playlists = [ ... ]; render() { const {navigation} = th ...

javascripttypescriptreact-native

Guide on populating a series of rectangles in a line based on values stored in an array using d3.js

I have 100 rectangles arranged in a 10x10 square. My goal is to assign colors to the rectangles based on values from an array var avg = [1, 4, 4, 7, 11, 15, 58] I'm facing an issue at the value 4 being repeated and I find the current code quite mess ...

javascriptjqueryd3.js

Leveraging the power of Ajax and Nodejs to dynamically refresh content on a webpage

I'm currently working on creating a loop to refresh a webpage every 30 seconds, but I'm facing some challenges with making an ajax call using the setInterval function. Below is a snippet of my server-side code: var app = express() app.get(' ...

javascriptajaxexpress

SCSS files scattered throughout Solution Explorer create disorder in Visual Studio

I currently work with Visual Studio 2013. Typically, in the solution explorer, scss files are displayed with their .css, .css.map, and .min.css files neatly grouped under the main .scss file. However, I'm experiencing a lack of organization as all th ...

cssvisual-studiovisual-studio-2013web-essentials

Struggling to fetch a custom attribute from the HTML Option element, receiving [object Object] as the result instead

I've been facing a challenging issue all day. My task involves making an ajax call to a predefined JSON file and trying to save certain contents into option tags using custom attributes. However, every time I attempt to retrieve the data stored in the ...

javascriptjqueryhtmljsonajax