I have a large scale application that is developed using Angular 4, there seem's to be an rendering issue exactly as mentioned in this post Angular 2 Chrome DOM rendering problems
.When I navigate using router from one component to another
, while this question has an answer already , I am still unable to solve this issue.
My Application structure is as follows :
app-home --- > app-main --- > app-sub --- > <router-outlet> (contents)
Each of this selector imports same mixin file which is used to import #font-face , while the solution mentioned in the above mentioned post suggests to use parent component and use ViewEncapsulation.NONE , I cant do the same thing since there is a usage of the imported font face in each of these components app-home, app-main,app-sub and subsequent childs as well. When I remove the #import statement from the .less files I get an exception like
Variable #helvetica-bold is undefined
Is there a workaround to make my texts appear normally in chrome when I route from one component to another.
You need to make sure the font import is only called once.
Hence, you should remove all the font imports from the mixin file as you have already tried in your answer.
But, you also need to ensure the fonts themselves are still present once in your app where all views can access it. You probably have a file like 'app.less' or something similar, that contains styles that are available in all parts of your app. Cut the font-imports from your mixin, and instead place it in this file (make sure the path references are still valid, they might need to be adjusted). If you do not yet have such a file, you will need to create one and load it once on app start.
Related
I'm on a Mac, macOS High Sierra 10.13.6
Since i updated Chrome a week or two ago, changes i make to CSS files (or SCSS for what its worth) will be saved correctly always, but Chrome will only refresh the styles in my page once. Local Overrides are disabled, Workspaces set up correctly, Source Maps are and have always been proper and in place. Nothing actually changed in my environment, other than updating Chrome.
I tried resetting all the caches, tried hard reloads, removing cache internals even. I tried anything i could think of. I researched online but was not able to find answers to this particular problem.
So to sum it up:
I open Chrome
I load my page locally (a localhost environment)
I open Developer Tools
I pick an element on my page
I click on the name of the resource on the right (a CSS or SCSS file)
I make changes to the source of the CSS/SCSS file file via the sources tab
I hit save. Changes are saved. Netbeans if open will immediately show the changes. If it was a SASS file, NetBeans triggers the compile on change
Chrome updates the styles in the page as it should
I make another change in Sources panel
I save the changes
Changes are saved – if NetBeans is open it will show the changes immediately and if it is a SASS file it will compile it
Chrome does not update the styles in the page. Never again until i reload.
I even reinstalled Chrome. Removed ~/Library/Application Support/Google/Chrome entirely and restarted the browser after, starting off with a completely fresh profile. Still no jazz.
Can someone point me in the right direction here?
After my frustration went through the roof, i decided to meticulously cut down content from my rather large primary SCSS file for the page, reloading the page each time, trying and testing out making changes. Turns out the problem went away as soon as i removed a certain #import on top of the file. But other imports worked.
Why?
The imported file was for fonts. It contained various #font-face definitions. And on the bottom i had two `#import' statements referring to external resources via http.
I removed those and bingo – now Chrome was updating the styles properly with every change i made. Problem solved. Is this a bug? I don't know.
I then tried to place the imports directly in the main SCSS file on top, and even then they will cause the problem to occur.
The SASS documentation has this to say:
Plain CSS #imports
Because #import is also defined in CSS, Sass needs a way of compiling plain CSS
#imports without trying to import the files at compile time. To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any #imports with the following characteristics to plain CSS imports:
Imports where the URL ends with .css.
Imports where the URL begins http:// or https://.
Imports where the URL is written as a url().
Imports that have media queries.
In other words, i basically wrote a normal CSS #import and while i have not tested this in other environments or systems, any such statements seem to break Chrome's ability to automatically update styles for a page after it was done once.
So to save others time who might stumble upon this: Get rid of your #imports and you'll be good.
The accepted answer of this question contains a good explanation.
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:
Template project, directly from GitHub:
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.
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).
I'm trying to add a SVG into my webpage, I think the format is a bit odd.
https://gist.github.com/Vadorequest/c329dec26e39a586e96df5f74c1d7d29?short_path=d29c6c9 (you can see the source code and the rendering there)
The style part isn't correctly understood since I'm loading this file using React. If you save the file and open it in a browser, it'll work fine. But if I load it by react using react-svg-loader, it displays a dark image.
import IconBook from "-!react-svg-loader!../assets/couverture-eBook-VF.svg";
...
<IconBook height={250} />
Is it standard to put the style like this? Should I get a new SVG exported differently? I really don't know that format and all its possibilities.
Edit 1:
I found a working workaround for anyone interested: https://github.com/gilbarbara/react-inlinesvg
It basically loads the svg file over network and anything in it will be correctly loaded. (including <styles>)
On the bad side, it makes the app rely on something that must be available via CDN or alike. (you won't have the svg embedded in your app. If you wanted some kind of standalone app that can be built with everything in it, it's not really good)
On the good side, it doesn't require any change in the SVG file, you use it as it, load it over network, and it displays as in the browser.
Since I'm building a standalone app (basically, npm run build will generate a folder with my whole app) this isn't perfect because I need to host that file somewhere on a CDN. So I'll keep looking for another solution.
It is fine to have styles in your svg file, as specification says:
Cascading Style Sheets (CSS) is a stylesheet language used to describe
the presentation of a document written in HTML or XML (including XML
dialects such as SVG or XHTML). CSS describes how elements should be
rendered on screen, on paper, in speech, or on other media.
https://developer.mozilla.org/en-US/docs/Web/CSS
In a NativeScript app I'm trying to apply some global styles that will be shared across the app.
This is my structure:
- styles
- partials
- _buttons.scss
- _exports.scss
_buttons.scss:
.flt-btn {
border-radius: 35px;
}
_exports.scss:
#import '_buttons.scss';
app.css:
#import './styles/partials/_exports.scss';
As you can see the the styles for .flt-btn should be applied, but they're not.
I'm using the class in a feature module that's lazy loaded, login like this:
<Button class="flt-btn" text="A button"></Button>
If I put the btn styles directly in app.css without any imports it works, but since this is a css file I can't use scss in it. So I'm not sure if the imports will ever work by doing it like this.
How can I make sure that the styles from the partials imports are applied application-wide?
EDIT:
I found this, which successfully imports my own styles into app.android.css and app.ios.css files. BUT.. After I've installed SASS and done this the app is just completely blank when I run it in the emulator, both in android and ios.
I get no errors, nothing. Has anyone successfully been able to get sass working like this? Please let me know how and thou shalt be rewarded.
EDIT 2:
It looks like the app is running, because I can successfully log something in the app.component.ts's constructor, so I'm guessing that something is causing all the elements on the page to disappear with the new styles settings.
I found this guide: https://docs.nativescript.org/ui/theme#sass-usage
Which is the correct way to go about this. This will create a scss/css file for android and ios as well as creating an _app-common.scss file which you can use to import your own custom styles into. This will then be applied to the android and ios css.
Strangely enough the component scss works without installing sass like above. But after installing sass you can no longer reference the scss file in the styleUrls property of a component, it should now instead link to the css file. Why this is I haven't been able to figure out, but I guess it's not a big deal since it at least works.
The answer provided by #tay hua is incorrect, as it refers to the angular-cli rather than the nativescript-cli, so if you're like me and got stuck on this, this is the answer you should be looking at.
I'm working on theming a web app, and I ran into a problem with an angular directive that is being used. It's called angular-knob, and it uses an HTML5 canvas to display a progress bar input. Since it's a canvas, you have to tell it the color in JavaScript instead of CSS. This is the problem.
The rest of the site is themed based on a set of LESS variables. I would like the canvas to be the color of #brand-primary from the variables.less file, which could also be overridden in other theme-*.less files. I haven't found a good solution to this yet, but these are some of the ideas I've had:
Parse the variables from the LESS file with some kind of ASP.Net utility (haven't found anything that would do this for me) to get the variable names and then render them to the client in a JavaScript variable (which I could then put in an angular service)
Have gulp parse the variables from the LESS file (again, haven't found any npm packages that would do this for me) and create a script that puts the variables in with the JavaScript bundle.
Like I said, I haven't found any LESS file parsing utilities for ASP.Net or npm that would get me access to the LESS variables.
How would you tackle this kind of problem? Has anyone else had to handle something like this?