2

I've mostly done back-end work in the past, but I'm taking it upon myself to learn how to use Vue, and in addition to being partially color blind, design is not my strong suit. As such, I'm using a template so that I can at least have a base to start learning from.

Weirdly, however, I've noticed many times the way the CSS is loaded on my copy differs from the template, and I cannot seem to figure out why. Simply put, it seems like the SASS I've copied to a new project does not override in the same way.

My Version:

My Version

Template project, directly from GitHub:

Template project

I can get around this somewhat by finding the CSS in question and adding a "!important" to the end, though this feels like a rather hacky solution to the problem, and I'd be better off finding the real culprit, though perhaps that is the best solution.

The SASS has been directly copied from the template, so I know that nothing there is amiss. My version and the template also use the Vue-CLI that comes with Webpack, so I'm not sure if it can be some variation there, with Webpack choosing that one file cascades the other? I have all the same dependencies in my package.json file, so I know I'm not missing some crucial dependency.

I've labeled the Imgur pictures in the link I provided, but for clarification, I'd like the background to be transparent for the inspection I provided. In the template, the transparent background overrides the white, but when I run the copy of this template, the white overrides the transparent. This happens in a good handful of places I've found, so it is not just one specific part.

Hopefully this question doesn't have so many possibilities that it's impossible to answer. I just don't understand at all what could be amiss.

Devildude4427
  • 892
  • 1
  • 8
  • 28
  • @PatrickStephansen Didn't know that, but that's just an issue of terminology. – Devildude4427 May 15 '19 at 13:32
  • @PatrickStephansen That is what I currently do. Webpack most certainly does process it, as you can see it's labeled as "inline:..." in the images. I just stated that Webpack is there as I was not sure if it could perhaps be bundling things incorrectly, though if like you said, Vue used scoped CSS, Webpack could not be the issue. – Devildude4427 May 15 '19 at 13:36
  • Maybe related https://stackoverflow.com/q/53675683/1981247 (read linked stuff there as well) – Traxo May 15 '19 at 13:41
  • I missed the point in my deleted comments since your screenshots weren't loading for me. I have no idea how this is possible. The rules have the same specificity so I though the one that appears last should win. – Patrick Stephansen May 15 '19 at 13:48
  • @Traxo It doesn't seem to be related, as far as I can tell. The variables are set, and are set correctly, it's just weird overriding. – Devildude4427 May 15 '19 at 14:18

1 Answers1

0

As you can see, the two CSS rules have the same specificity, so all things equal the rule that comes second will overwrite the first rule. In this project, there are essentially two style imports: Vuetify and the SASS files for the template (found in @/styles/index.scss).

I was able to recreate the issue by moving around the imports of these two style sheets.

In order to get the intended behaviour, you must import the styles provided by vuetify-material-dashboard after the stylesheet provided by Vuetify.

In the template project, Vuetify is imported first in main.js as import './plugins'. The vuetify-material-dashboard stylesheet, which overrides Vuetify styles, is imported in App.vue (a child of main.js).

toads
  • 116
  • 5
  • And I have it done the same way in my project, copy/pasted. Sorry, this is probably a needle in a haystack question and not something SO can help with :( – Devildude4427 May 16 '19 at 11:54