I've recently updated from angular 10 to 12.
I use SCSS.
After updating I noticed my logo is behind the content and all my z-index values have # prepended to the values and I don't know the reason why nor can't find any good information on where this change originates from or what is the cause.
Nothing changed in my config files or build pipelines except src package.json updates for packages
I also use angular material as my UI components library and have bootstrap spacing module imported additionally
I know the CSS is invalid. (after build). It's valid in design time but after build in runtime it gets hashtag prepended for whatever reason.
This was NOT the case before updates
Here's the design time
Is this some new angular feature that I'm missing here. Can't find anything relevant in docs.
Is this tied to Ivy?
Edit:
I believe this could be tied to recent sass API changes moving from #import to #use statements. ng update command should (according to docs) update and refactor scss for me but that's not the case.
Once I'm done refactoring if it fixes the issue I'll post it as answer here
Update to the latest available version of Angular. I had the same issue with 12.0.1, after ng update (12.0.5) the issue was fixed.
Check if it is inheriting the z-index from parent class. If it is then place it outside the parent class.
Related
I read from time to time that it is bad practice to override css selectors in node_modules. Good practice is to override the stylesheets with more specific selectors in your own project. Can someone please explain to me why exactly this is bad practice.
To give you an example, I use the ngx-bootstrap datepicker and have had to adapt it for an application. For this I have added a custom theme to the bs-datepicker.css file. The bs-datepicker.css file was finally placed in the app folder, so everyone who pulls the project via gitlab will have the datepicker as custom when installing the dependencies via npm.
Could one say it depends, or is it fundamentally bad practice to extend the css of a node module or even overwrite selectors here?
you node module will only stay in your computer. If someone else uses your code and tries to run npm install , they will not get you manual css changes.
Also if you ever update your node_modules then also your changes will be overridden
Therefore you are suggested to make your changes in your code not in node modules.
You can use ::ng-deep in your code to make changes to some css in a library
I would like to use the flag-icon-css library in my Angular 8 project. I've managed to import it and the flags are showing, however, they are only displaying as squares. How do I get them to display as rectangles?
I installed the library through npm and added this code to my global styles file (per this answer: Can angular cli use flag icon css?):
$flag-icon-css-path: '~flag-icon-css/flags' !default;
#import "~flag-icon-css/sass/flag-icon";
This is the code I use in my template:
<span class="flag-icon flag-icon-us"></span>
I am not using the flag-icon-squared class. Still, the flag is only displayed as a square.
EDIT (Added to clarify):
If I increase the width of the span, the span widens, but not the flag itself. I also tried using flag-icon-background, with the same result.
I checked the svg image itself, and it is a rectangle, however, I noticed that it also has a lot of whitespace on its left side. So that might be causing the issue - the span is displaying the whitespace and only part of the flag.
I'd appreciate any suggestions!
The reason this is happening is because the 1x1 and 4x3 ratio SVGs are being copied to the root folder after a build - you can see if this you view the style of the icon and hover over the background image URL. The 1x1 images are being used by the CSS which is why the flags are always square - I'm not sure why this was not an issue in Angular 7.
A work around is to manually copy the images into your assets folder and manually update the CSS to point to your assets folder. The downside is that you will have to manually update the CSS every time you update the npm package.
See here:
https://github.com/lipis/flag-icon-css/issues/514
I've recently has the same problem.
I overcame this by renaming the SVG files and redirecting the paths referenced in the styling files.
Specifically, you can see the changes I made here: https://github.com/nunnsy/flag-icon-css/commit/2eabbda9daf6a53627a7d4952eae0d1164bb04fc
This is by no means a long-term fix, I just needed a quick hack personally and figured someone else may want some guidance.
I understand Angular was copying the files and overwriting the 3x4 with the 1x1 due to them having the same name (separated by folder), hence the renaming out of the folder with the size now in the file name: XY_xx.svg
Even trying to reconfigure image hashing did not solve my issue - if someone has a way of implementing this, I'd appreciate to know how you implemented it. Or, any other solution, I'll be watching this question.
I'm experiencing the same issue in debug mode but not for a production build. So if it's an issue you do not want to spend a lot of time on, know that it won't exist in a production environment, building with the --prod flag solves it.
If you don't need square ones
Fast ugly hack: change the names of folders 1x1 and 3x4
I think it is correct to download images bypassing npm
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 using CSS Modules (Sass) with rollup on a component library project, which is working well. Each component ends up with a dist folder containing a single JS bundle file, and a corresponding CSS file with the scoped CSS classes so consumers of the component don't have to worry about CSS class name conflicts. All they do is include the JS bundle and the CSS file and everything is great. Yay CSS Modules.
The problem I'm now facing is that some components really need separate "themes" - ideally, separate CSS files, one per theme. So consumers can continue as they've been doing: including the JS bundle, but now choosing which CSS file to include to pick a theme.
I'm not sure how to get this going with CSS modules & rollup, and whether this is even the sort of approach others are taking. From what I can see, rollup always handles bundling things together, whereas I want separate CSS files, all of which get their classes renamed identically during the build phase. That way, if within my JS I refer to styles.myclass, if myclass had gotten renamed to scoped-myclass by CSS modules for the original CSS file, for a second CSS file it would also get the same name.
This would keep consumption of the component extremely simple - just a matter of including a different CSS file.
Any suggestions?
Awfully late, but let me answer this 3 years on. So what I ended up doing was totally detaching the CSS generation step from rollup and relying on the Sass CLI to handle that portion of the build process. It felt a bit klutzy, but I remember it wasn't awfully hard to do and solved the problem I outlined above. I don't believe there was a plain rollup solution at the time, nor do I think there's one today.
However... in my case the whole approach was kinda mistaken. This certainly won't be everyone's scenario, but let me spell it all out because hey it may be useful and it definitely wasn't obvious to me at the time.
This was for an in-house shared component library, where each component and its corresponding CSS was a separate npm package stored in our Artifactory. When it grew, plenty of internal references popped up, e.g. multiple components would reference the Button component, and over time they'd reference different versions of the Buttons component - each of which needed its own properly scoped CSS, unique to that package-version.
So what I found was that by doing it this way - having the CSS generated as part of the npm package dist files - I had to write an additional layer for the consumer applications that would parse their node_modules/ folder for our own internal components and combine all the different CSS files, such as the multiple versions of buttons. e.g. the main application would directly import buttons v1.0.0 in its package.json file, but the Dialog component (also included in the package.json) could include buttons 2.0.0 as its own dependency. For every version of the package, there was a uniquely scoped version of the CSS - so the consuming application HAD to include every version otherwise the styling would be borked.
So all in all, it ended up being way more complex that I wanted. I thought I could make it easier & better with the separate generated themed CSS files as part of the package dist, but it didn't end up that way. If I could revisit that project today, I'd re-examine a solution used by Material UI and others which I kinda poo-poo'd at the time: automatic injection of the CSS into the page by the component JS, rather than generating standalone CSS files which required extra work by the consumer applications to gather up and add to the final webpage. Frankly, now I regard it as the "least crap". There are definite downsides to the injection approach (extra work done on every page render for everyone! Yikes!), but there's no doubt in my mind it hugely simplifies the job of the consumer applications. It's a balancing act, but in 20-20 hindsight I'd lean towards the injection approach. With that, scoping & theming is a different and much simpler problem.
If I got you right, consider looking at SCSS plugin: rollup-plugin-scss. It captures all spare .css files imported in the components, and then processes them through underlying node-sass. The catch is, it seems like you can write a custom callback function that'd handle your CSSs differently based on conditions you throw in.
Based on the example from the plugin's page:
import scss from 'rollup-plugin-scss'
...
export default {
input: 'src/index.tsx',
output: [...],
plugins: [
...
output: function (styles, styleNodes) {
// replace this with conditioned outputs as needed:
writeFileSync('bundle1.css', styles)
writeFileSync('bundle2.css', styles)
},
]
}
Hope you all doing great.
I am using SCSS and Bootstrap in my Angular Application and as we know once Angular app runs, it converts these SCSS files to CSS version of it.
How can I check CSS file size generated as a whole for application as I need to show some reports for optimization tasks.
Any idea. I tried googling and here on Stack Overflow but couldn't find required solution. I can't even see any CSS file in Network tabs of Browsers.
Any Suggestion?
Assuming you are using Angular CLI for your project, which uses webpack internally...
Once you build a project. A dist directory is generated in the project root. Take a look into it and you'll find all the .js and .css bundles it might have generated.
Note - The size will vary based on what kind of build you do. For a production build, the sizes are going to be minimal, for other kinds of builds, if any, the sizes may differ.
You should go first in the Networks tab then reload the page. Once you reload it, click on CSS filter then you would see all the list of CSS included in your app, with the file size.
I didnt find any css generated in Network like above answer but I did a trick.
I went to webpack folder and there I found one generated CSS. ( Searched through a random CSS Selecto ).
I right clicked and saved it on desktop. If you check the properties of this CSS file, it shows the size in KB.