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
Related
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.
When creating a Single Page Application, I have had the need to reuse CSS as a string.
The need was from a library requiring passing CSS as a string and needing to also use that CSS in the page.
To achieve this, I went through 2 routes, and both failed. Referring to the style tag element should be simple, so I'll focus on this in this issue, but if anyone can solve the other route, please let me know. Regards.
Attempted routes to solve issue:
Reference style tag element. Couldn't get this to work. Even has problems using global querying because of build process destroying ids.
I tried using raw-loader to directly import, but failed. I am using Typescript so tried to import as a string but failed again.
I was able to fix my main goal of reusing the same CSS by using external css in the style tag and importing the css as a string using raw-loader.
import css from !!raw-loader!./my-css.css
...
<style src="./my-css.css">
I still do not know how to get a safe reference to the style tag, but the above solves my issue.
* The reason for the style tag not being easily referenced even via document.querySelector is that the build process seems to strip attributes.
So I think the title is enough explaination: I would like to dynamically theme my whole application. Maybe this means to change color of all divs when I press a specific button, or change the whole webapp's colors when a specific user logs in.
Just to give some insights on what I am currently working on I will say that I have built a Vue.js app that uses many libraries, including one called Element-ui which already has a theming option built onto it. The problem is that it's written in scss and I would like to change all the variable colors during the navigation. My project looks something like this:
<template>
... some HTML and components...
</template>
<script>
... some javascript ...
</script>
<style scoped>
... some style that is scoped to the current component only ...
</style>
I have many files like this one so making a "global function" for all of them doesn't seem practical to me. Also I import the main scss file just once in my main.js.
Is there anything I can do to create a dinamic theming for my webapp? Is using saas a good idea? Javascript maybe?
EDIT
I feel like I didn't explain it good enough so I want to add a simple example. If you visit the Element page you can see in the top right corner there is a color selector that, when a color changes, it changes also the whole website's accent colors like the buttons colors, the links colors etc.
Hope this can help understanding a bit better
EDIT
Right now I have settled on a very poor and, I think, badly optimized solution. The idea is that when the user changes theme, I just create a new css file and append it to the current document.
let sheet = document.createElement('style')
sheet.innerHTML = `*[class*="--primary"]{
background-color: ${colors[0]};
}
...`;
document.body.appendChild(sheet);
I truly think this is a very bad solution but right now I can't come up with nothing else that could work dinamically when the user changes a parameter. I would really want the process to be flawless: the user picks a color and the whole application just changes to that specific color, no prebuilt theme.css.
FINAL EDIT
I've finally found a solution, refer to the answer!
Finally, after a few long days I came up with a solution that I think is both easy to implement and very very lightweight.
CSS VARIABLES
Before searching up a lot, I didn't even know the existance of these kind of variables and they don't seem so used. Anyway, I hope this can help someone out there seeking my same answer:
<template
<app-main></app-main>
<app-sidebar></app-sidebar>
...
</template>
<style>
:root{
--primary-color: #C5C5C5!important;
--secondary-color: #6C7478!important;
--tertiary-color: #FFFFFF!important;
--success-color: #80b855!important;
--warning-color: #eaca44!important;
--error-color: #ef4d4d!important;
}
/* Theming */
header{
background-color: var(--primary-color);
}
div{
color: var(--tetriary-colory);
}
...
/* END */
</style>
<script>
import axios from 'axios' /* all your imports etc. */
export default{
data(){
},
methods: {
axios.post(`http://localhost:8080/foo`).then(function (response){
let bodyStyles = document.body.style;
bodyStyles.setProperty('--primary-color', response.colors[0]);
bodyStyles.setProperty('--tertiary-color', response.colors[1]);
...
}
}
}
</script>
As you can see, I just initialize a few useful CSS variables and when I need them (for example in that api post call) I just modify them using a simple bodyStyles.setProperty('propertyName') function.
I really enjoy this type of setup since I use it in my login page so when a user successfully logs-in I load from the database his own colors and set them up just like that.
Hoping this can help someone! Cheers!
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?
I've written the following in an Aurelia app
import "bootstrap/css/bootstrap.css!";
import "./app.css!";
and I want app.css second in since it overrides bootstrap.css styles. However, I'm getting app.css first since I presume the system.js loader is running them in parallel and since app.css is the smaller of the two it gets loaded first.
Is there a way in jspm to define a dependency between these two files to control their loading order is is there some other way?
Many thanks in advance! :)
You could try to import the css using System.import.
E.g. in your index.html:
System.import('bootstrap/css/bootstrap.css!').then(() => {
System.import('./app.css!');
});
But keep in mind that this way you have to make sure that system.js is served with your app. So you can't bundle your whole app as an self-executing bundle.
We have some stuff in the pipeline that should help you with this issue. If you check out this:
<template>
<require from="nav-bar.html"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<nav-bar router.bind="router"></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
</template>
I know that Aurelia will be passing the CSS files to the loader in order, but I'm not sure if we'll be able to guarantee loading order. Hopefully Rob can come over here and give a proper answer to this, though. I'll point him in this direction.
I had exactly the same problem. Controlling order of CSS is not possible in JSPM. I solved this problem with SASS and some tricks. Here's what I've done:
In html you give main element some id:
<html id="some-id">
Then you create sass file that will host your overrides (_overrides.scss):
#some-id {
#import "buttons";
}
Now your buttons.scss can override styles from bootstrap (_buttons.scss):
.btn-default {
background-color: #B6B3C7;
border-color: #B33A3A;
}
This works thanks to the principle in CSS - most specific selector wins. By wrapping all your customizations in #some-id in scss it will produce code with every bit of code that is imported into curly braces prefixed by #some-id. This way your selector will always be more specific than bootstrap one and will override it.
I don't know if this will be sufficient for you as you don't mention scss, but it was for me.
I've faced similar issue during development.
The code below has helped me solve my problem.
Now everything is loading exactly the way I want it.
System.import('bootstrap/css/bootstrap.css!').then(() => {
System.import('./app.css!');
});
Thanks LazerBass for this suggestion.