In my Angular project, I have scss rules that describe how components should look when in the context of another component. Example:
:host-context(my-table my-row.header){
font-weight: 500;
white-space: nowrap;
height: 40px;
color: #6d6d6d;
background-color: #f3f3f3;
}
This works fine when working on localhost, however when I build it for production & put it live it does not apply that styling. Not sure what the difference would be?
Looking for suggestions on how to fix this so that the styling shows on production as well as development.
Okay after googling & experimenting a bunch I finally figured out how to fix the issue, although I have no idea why or why it works in dev but not in prod.
Essentially, if you use :host-context with multiple selectors, like so:
:host-context(my-table my-row){ ... }
It works in dev but will not work in prod.
Instead you should replace that with:
my-table my-row :host-context{ ... }
If you're only using one selector inside like :host-context(my-table){ ... } it works as expected on both prod & dev.
Credit to this comment I found https://github.com/angular/angular-cli/issues/8577#issuecomment-379177320 for giving me insight into how to move foward.
Related
I am developing an application using Vuejs/Nuxtjs. I would like to import some styles from the external CSS file and would like to include those styles only to that particular Vuejs/Nuxtjs component. Hence, I tried to add the scoped and #import to my styles but this is not working for me.
Code:
<style scoped>
#import "#/assets/css/drawflow.css";
.nodeContainer{
padding-top: 10px;
}
.node{
border-radius: 20px;
}
</style>
I tried to search about this issue and tried some of the alternatives mentioned here such as:
1.
<style scoped src="#/assets/css/drawflow.css">
.nodeContainer{
padding-top: 10px;
}
.node{
border-radius: 20px;
}
</style>
<style scoped lang="css" src="#/assets/css/drawflow.css">
.nodeContainer{
padding-top: 10px;
}
.node{
border-radius: 20px;
}
</style>
For some reason nothing seems to work and styles are not working. If I remove the scoped from <style> then everything is working perfectly but the styles are leaking to another component as well. Can someone please let me know how to fix this issue?
*** Edited based on #kissu response ***
thanks for your suggestion and response. As mentioned in the comment on your answer, I have created the sample project in Codesandbox.
When I use it without scoped and adding all styles in a single <style> tag my application looks something like this:
https://user-images.githubusercontent.com/29374160/168595607-700c099f-5adf-4d6c-86ab-ac9885f2e659.gif
When I use the style with scoped as mentioned in your answer then my application looks something like this:
https://user-images.githubusercontent.com/29374160/168595645-60edfb85-c409-40f0-8483-39e2d60bb4a7.gif
My application is not picking the styles from drawflow.css at all when I use scoped, hence it appears something like this. Note: I have not made any other changes apart from your answer.
I hope I am able to express my issue, I am not sure what's wrong here. Can someone please help me solve this issue?
You could use CSS modules as shown here but this is probably not what you want overall.
There is also this solution but it's importing the whole thing globally (it's not scoped).
But at the end, the simplest solution is to write it like that
<style scoped src="#/assets/css/drawflow.css">
</style>
<style scoped>
.nodeContainer {
padding-top: 10px;
}
.node {
border-radius: 20px;
}
</style>
The CSS import will be scoped and the other style will be scoped too.
I have to say that it's more tricky than in SASS but it works well (and installing SASS for just that is not worth anyway).
I have an issue with CSS variable (defined using var() syntax) with !important flag disappearing when Angular project is build in production mode (using ng build --prod). Specifically, in my scss file I have something like this:
.all-borders {
border: 3px solid var(--primary) !important;
// in "development" build this is correctly compiled to: "border:1px solid var(--primary)!important"
// in "production" build this is incorrectly compiled to: "border:1px solid!important"
}
.window {
height: 100px;
width: 100px;
background-color: cadetblue;
}
and in html file I have defined a simple div element like this:
<div class="all-borders window"></div>
and when I run ng serve (so build in dev mode) I can see that border is correctly compiled and applied on my div element. But, when I build in prod mode then my border becomes black and I can see in inspector that style has been compiled to border: 1px solid!important (notice that var(...) disappeared).
Here is a stackblitz example demonstrating this issue (that is development version) and here is how this looks when build for production and deployed.
The question is, can anyone explain to me why is this happening?
I can fix this issue in multiple ways, for example reorganizing styles and removing !important, or even writing border style like this border: var(--primary) 1px solid !important (weirdly enough, this works fine), but I am wondering why is this happening, could it be just a bug or is there a universal reason behind this?
I created an issue on Angular repo here, and it seems that this is a bug and will be fixed in Angular v9.
From what I could find out it seems that the issue was in the CSS optimizer they used, so they switched to a different one and it seems the issue is resolved (in v9). Worst case scenario is that this may introduce some breaking changes in which case this fix may not make it in v9 but there are no indications that this will happen (for now).
I'm trying to understand why some CSS isn't being friendly with me - I was messing with this codepen:
https://codepen.io/arcs/pen/OmZaex
When you enter information into the input, it has the label move up and out of the way.
I'm almost positive this line of CSS is doing the work:
#inputContainer input:valid + #inputLabel {
top: -15px;
font-size: 11px;
font-weight: normal;
color: #9e9e9e;
}
I have never seen this convention before and when I try to use it on a Wordpress page, this CSS state is not being triggered.
CSSLint also declares this as invalid.
Any CSS experts out there know how to make this work on a Wordpress Page...or at least why it's not working?
Edit: I failed to mention this was inside of a Wordpress Page - I apologize for forgetting probably the most important aspect of this question
Maybe issue with relative paths to your local environment vs. where they are on the server. Try changing the paths to your files to absolute/full paths based on server. Also, is any of the css formatting working? For example,
Relative Paths
/files/style.css
Absolute Paths
http://www.yoursite.com/files/style.css
I'm working with a friend on a project with a huge CSS file.
There is a lot of duplication like:
h1 {
color : black;
}
h1 {
color : blue;
width: 30px;
}
The first h1 can be removed, because it will never be used, because fully rewrited by the second. (because it is in the same CSS file)
I would know if it exists a tool that factorizes (and compress) this kind of stuff.
To only have at the end:
h1 {color:blue;width:30px}
PS: If it can be an online tool, it will be perfect!
There's a nice one in ruby: http://zmoazeni.github.io/csscss
In node.js: https://github.com/rbtech/css-purge
Both are very easy to use from command line.
This is also a nice once: http://cssmerge.sourceforge.net
And a plugin for Firefox: https://addons.mozilla.org/en-us/firefox/addon/css-usage
First you can try
CSS usage checker
Then Try these
CSS Compressor
Javascript Compressor
If you are using Firefox, you can use this addon which will help you achieve it.
https://addons.mozilla.org/en-us/firefox/addon/css-usage/
It creates a new css which tells you only used rules and sideline unused one. It also lets you export that css.
I am trying to apply the folowing css rule
div#ja-navhelper.wrap {
display: none !important;
}
to the following joomla site
http://nuevas-tecnologias.org/index.php
but it is not working
any idea why?
It is bad practice to do this div#idofelement. It is better to just do this: #idofelement
Are you sure you're actually setting it? Because I'm not seeing it anywhere in your CSS for the website when I check using Developer Tools. However, you do have an empty #ja-navhelper{} and if I simply set display:none; inside it via Developer Tools... it works!