I have a project in VUE JS where the styling for each page is loaded LOCALLY. (No styles are loaded globally).
Whenever I navigate from one page to another, the styles just crash. Everything gets buggy.
It looks like it doesn't reload the styles or it cascades them all.
When I refresh the page manually, the styles return to normal.
I made a video showing what is happening:
Could you help me?
https://www.youtube.com/watch?v=FoeZC8vEQqU
enter image description here
This problem was already happening when I was loading the styles globally.
I left all styles in local mode and this is still happening.
Related
im trying to build a markdown blog website but I've ran into a bug. I use tailwindCSS for my project so all of the default styles are removed. So when I added markdown to my project it didn't look good as it shouldn't. However when I revert all styles like:
<style>
p{
all: revert;
}
h1{
all:revert;
}
h2{
all:revert;
}
h3{
all:revert;
}
... and so on.
It works perfectly while I'm in this developing session. However if I reload the page it doesn't work anymore. Feels like the style tag doesn't get applied but if I remove the style tag, save and paste it back in it works again.
It just feels like a weird bug does anyone know how to fix it? much appreciated
Right i fixed it, if anyone has this bug. To revert certain elements back to their default styles. add the all: revert within the selector like I did but except of putting it in a vue component add it into the index.css where you import your tailwind
I've a problem with a Vue-js application (Vue 2.6.6).
I need to create a new page in this application that must not be affected by vuetify and other styles placed in the head of index.html file. I wanna now if it is possible to inject a view (navigating to it with routing) without applying styles or if it is possible to create another entry point for the app, making it as a multi-page application.
I've found a documentation for doing it, but the structure of files and folders they talk about is different from mine (I did not create the project) and I don't understand what I gotta do to set multiple pages.
https://cli.vuejs.org/config/#pages
I have a "main-priv.js" file inside src, not a "main.js", don't know if it is same.
I'm really bad with configurations and stuff like that, I've probabily taken the wrong life choice with this work, but nevermind, can you help me?
I originally had Vuetify working perfectly in my app but somewhere along the way the styles of components broke and I'm not sure how to fix it.
For example, here is my Vuetify table:
Reality:
Expected:
As far as I can tell everything is setup correctly, I will say, I started using SCSS inside the modules but I don't think that is the problem.
The functionality of Vuetify is working like sorting and things like that but just the styles are broken it appears.
I am trying to develop an application using vue.js2. I am getting some strange texts in source code. You can see those texts in below image.
Could anyone say why it is coming ?
You might be using scoped attribute on styles tag in your .vue files to scope your styling to the component only.
Any styles scoped to a component using the <styles scoped> ... </styles> , the styles will be applied only to the elements in that component only.
So vue-loader which parses the .vue files uses PostCSS behind the scenes to achieve this by add adding those weird and unique data attributes.
See Scoped CSS for more info
Is Bigcommerce performing some sort of minification to the main theme.css stylesheet being generated in production? I'm seeing a strange issue where certain styles that work correctly in development do appear in production.
Here's an example. In my development store, you can see the new customer sign-up box here:
As you can see on the right, I'm showing the styles that are being applied to the ul element, which ensures there is a left margin of 1.25rem.
Now, after bundling the theme with stencil bundle and uploading it to my development store, this is what I see:
As you can see, the ul element no longer has it's margin-left applied. On the right, you can see that the styles being applied are not the same as they were in production. Specifically, the margin-left: 1.25rem rule is being overriden by the margin: 0 rule.
It's as if some process was run to combine style declarations for certain elements, but this caused the order of the rules to change. Does anyone know what is happening here? Or what process is being used to attempt to minify this css? Maybe it's a bug with the library doing the minification.
UPDATE
Here's another example of the issue that I just came across. I have a style declared to show a magnify glass when the user hovers over the main image to indicate that they can zoom. The style is defined as follows:
.zoomImg {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}
As you can see, in development, this style appears correctly for .zoomImg:
However, in production the style is incorrect. The chrome prefixed declaration is missing:
Where did it go? I'm confused why the styles are being changed. Again, I'm assuming it's part of some minification process. Any ideas?