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:

On PROD:

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

The animation in CSS seems to be malfunctioning, but strangely enough, the exact same code works elsewhere

Recently, I encountered a strange issue with my project. An animation effect that was working perfectly fine suddenly stopped working when I opened the project. To troubleshoot, I downloaded the same project from my GitHub repository and found that the ani ...

cssanimation

The alignment of the Unicode character is off and is not centered within the button

Upon implementing a unicode character as a button, I've observed that the alignment of the character is not centered properly (both horizontally and vertically) within the button. It's puzzling why this misalignment occurs even after setting padd ...

htmlcssunicode

Arrange the div and ensure that the external JavaScript file functions properly when the page loads

I am encountering an issue with my JavaScript and CSS code. It works perfectly fine within the fiddle environment but fails to function properly outside of it. Here is the link to the fiddle When I embed the code into an HTML document directly, it does n ...

javascripthtmlcss

Possible solution to address the issue: xhr.js:178 encountered a 403 error when attempting to access https://www.googleapis.com/youtube/v3/search?q=Tesla

Encountering this console error: xhr.js:178 GET https://www.googleapis.com/youtube/v3/search?q=river 403 A specific component was designed to utilize the API at a later point: const KEY = "mykeyas23d2sdffa12sasd12dfasdfasdfasdf"; export default ...

javascriptreactjsapiaxios

Ways to ensure the bootstrap table header width aligns perfectly with the body width

I am having an issue with my bootstrap table where the header width is smaller than the body width because I set the table width to auto. How can I align the header and body widths? Here is a link to a plunker showcasing the problem. https://plnkr.co/edit ...

javascripthtmlcsstwitter-bootstrapangular-ui-bootstrap

When utilizing Vue.js, I aim to eliminate a <td></td> element as the colspan data increases

After playing around with vuejs for a few weeks, I am facing an issue. I want to dynamically remove a td tag every time the colspan value exceeds the default one. For example, if the initial colspan is 3 and it changes to 4, I need to remove one td tag. So ...

vue.js

Having issues with Vue.js when using Vue-strap Radio Buttons

While developing my web application with vue.js, I encountered an issue with radio buttons when I switched to using bootstrap style. I understand that I need to use vue-strap for proper data binding with bootstrap styled radio buttons in vue.js, but I am s ...

javascripttwitter-bootstrapdropzone.jsvue.js

Tips for utilizing props in a Vue component

When trying to incorporate a prop into a computed value, I encounter the following error: [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined" found in ---> at src/cmps/space-details/space-imgs.vue at src/pages ...

javascriptvue.js

Choosing Vue select options depending on a condition

I am working on a dropdown template with Vue.js and have encountered some challenges. Here is the basic structure of my dropdown: <select v-model="selectedClient" class="stat-select text-u-c"> <option disabled value="">Please select a Client ...

typescriptvue.jsvuejs2

Node.js causing issues with retrieving data from REST Calls

I am trying to make a REST API call from my PHP and Node.js application to a specific URL provided by the client, which is expected to return a JSON object. While I am able to successfully retrieve data using PHP, I'm encountering issues with my Node ...

javascriptjsonnode.jsrest

Ways to fix the error message 'yarn package has unresolved peer dependency'

Whenever I run yarn upgrade or install, a bunch of warnings pop up due to unmet peerDependencies. warning " > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4322332c2f2f2c6e2f2a2d286e2b37373303726d766d7a">[email pro ...

javascriptnode.jsnpmyarnpkg

Embed JavaScript code within the Material-UI components

I am working with the material-ui ListItemText: <ListItemText primary={<div> <Table className={classes.table}> <TableRow> <TableCell width="40">{item.issue_state}</TableCell> <TableCell width="40">{ ...

javascriptnode.jsreactjsmaterial-ui

What is the Process of Rendering CSS/HTML in Web Browsers?

I have a simple question that I haven't been able to find an answer for despite my efforts on Google and Wikipedia. Perhaps I'm not wording it correctly. My query is regarding how the combination of CSS and HTML is displayed on-screen and in a b ...

htmlcssvectorbitmap

Trigger Vue method when the size of a div element changes

Is there a way to trigger a method every time the dimensions (width or height) of a div element change? <template> <div> </div> </template> <script> export default { methods: { updateSize() { // ...

javascripthtmlvue.jsvue-component

Increase the Z-Index of the Header above the Material UI Modal Background

Currently, I'm in the process of developing a mobile version of a web application using Material UI. However, I am encountering some challenges when it comes to matching the designs accurately. My approach involves utilizing the MUI App-Bar in conjunc ...

javascriptcssreactjsmaterial-ui

Is there a way to incorporate innerhtml (or innertext) with the h() function for adding content?

Due to certain requirements, I need to utilize virtual DOM. Below is the code snippet that I am working with: // test.js import { h, ref } from 'vue' const ButtonCounter = { name: 'button-counter', props: { tag: { type: S ...

javascriptvue.jsvuejs3

Encountering issues with JSON.Parse in JavaScript leads to errors

I'm encountering issues with JSON parsing in my code and I can't figure out the cause of it. I have a function that calls two ajax functions, one at the start and another in the success function. Everything seems to be working fine until I try to ...

javascriptjqueryjson

Encountered a problem initializing Rangy.js on Internet Explorer

Currently, I am developing an angular application that utilizes textAngular along with rangy-core and rangy-selectionsaverestore. However, I am encountering some errors specifically on the latest version of Internet Explorer: Module 'WrappedSelection ...

javascriptangularjsinternet-explorerrangytextangular

What is the process for incorporating dynamic templates in AngularJS?

I have created 3 unique templates (DetailView, CardView, Column) for displaying content on a single page. Users can easily switch between these views. My goal is to display only one view at a time on the page. When the user switches views, I want to remov ...

c#htmlcssangularjs

How big should the placeholder image be for the image area?

How can I create a loading image to replace a .gif while it loads? I need a placeholder image of about 325x325 (same size as the gif) to keep content in place. I've attempted using background: url() without success and haven't explored JS/jQuery ...

javascriptjqueryimagebackgroundplaceholder